JSP chỉ là công nghệ chế độ xem phía máy chủ. Nó không cạnh tranh với jQuery. Bạn hoàn toàn có thể tiếp tục sử dụng JSP cho việc này. Nhưng tôi hiểu rằng bạn muốn kích hoạt một yêu cầu không đồng bộ bằng cách sử dụng kỹ thuật ajaxical thay vì yêu cầu đồng bộ. Đó cũng không phải là vấn đề trong JSP.
tiên, chúng ta cần phải có hai Dropdowns trong JSP:
<select id="dropdown1">
<c:forEach items="#{bean.items}" var="item">
<option value="#{item.value}">#{item.label}</option>
</c:forEach>
</select>
<select id="dropdown2">
<option>Please select dropdown1</option>
</select>
Sau đó, chúng ta cần phải đính kèm một số jQuery để sự kiện change để nó lấp đầy thả xuống thứ 2 dựa trên giá trị của thả xuống 1. Thêm dòng sau vào <script> trong JSP hoặc một kịch bản bên ngoài mà được nạp thông qua <script src> trong JSP:
$(document).ready(function() {
$('#dropdown1').change(function() {
var selectedValue = $(this).val();
var servletUrl = 'dropdown2options?value=' + selectedValue;
$.getJSON(servletUrl, function(options) {
var dropdown2 = $('#dropdown2');
$('>option', dropdown2).remove(); // Clean old options first.
if (options) {
$.each(opts, function(key, value) {
dropdown2.append($('<option/>').val(key).text(value));
});
} else {
dropdown2.append($('<option/>').text("Please select dropdown1"));
}
});
});
});
Trong servlet đằng sau url-pattern của /dropdown2options chỉ trả lại bản đồ các tùy chọn như JSON. Bạn có thể sử dụng Gson cho việc này.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String selectedValue = request.getParameter("value");
Map<String, String> options = optionDAO.find(selectedValue);
String json = new Gson().toJson(options);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
Về cơ bản là tất cả.