public class Linkage {
private String code;
private String name;
public Linkage(String code, String name) {
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
java对json进行序列化和反序列化时，记得引入json工具包（fastjson、jackson-databind等）
@WebServlet("/content") //@WebServlet注解相当于web.xml文件
public class LinkageServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String level = request.getParameter("level");
String parent = request.getParameter("parent");
List list = new ArrayList();
if(level.equals("1")){
list.add(new Linkage("back", "后端开发"));
list.add(new Linkage("front", "前端开发"));
}else if(level.equals("2")){
if(parent.equals("back")){
list.add(new Linkage("java", "java"));
list.add(new Linkage("c++", "c++"));
}else if(parent.equals("front")){
list.add(new Linkage("html", "html"));
list.add(new Linkage("css", "css"));
}
}
String jsonString = JSON.toJSONString(list);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(jsonString);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
/*一级下拉框填充*/
$(function(){
$.ajax({
url: "/content",
type: "get",
data: {
"level": "1"},
dataType: "json",
success: function (data) {
data.map(function (item, index) {
$("#lv1").append("<option value='" + item.code + "'>" + item.name +"</option>")
})
}
})
})
/*二级下拉框填充*/
$(function(){
$("#lv1").on("change", function(){
//获取一级下拉列表中选中的项的value值
var parent = $(this).val();
$.ajax({
url: "/content",
type: "get",
data: {
"level": "2", "parent": parent},
dataType: "json",
success: function(data){
console.log(data);
//移除所有lv2下的原始option选项
$("#lv2>option").remove();
//遍历填充
data.map(function (item, index) {
$("#lv2").append("<option value='" + item.code +"'>" + item.name + "</option>");
})
}
})
})
})
</script>
</head>
<body>
<select id="lv1">
<option value="selected">请选择</option>
</select>
<select id="lv2"></select>
</body>
</html>