jquery，json异步处理请求的级联练习
作者：互联网
jq，json省市级联练习笔记
级联方式一，在父标签下重写标签体
数据库数据
前端代码
1.将服务器传给后端的数据封装成json字符串响应给前端，前端通过回调函数拿到数据进行遍历
2.定义一个为“选择的option”的变量，将遍历出来的数据拼接存放到变量中
3.将变量使用html方法改变标签体，放在父标签下
4.每次改变都会重置标签体
5.所以需要注册一个改变事件，在改变事件中定义“地市”；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="province">
<option>==请选择省份==</option>
</select>
<select id="city">
<option>==请选择城市==</option>
</select>
<script type="text/javascript">
//页面加载后直接发送异步请求给数据库
$.post({
url:"AreaServlet",
async:true,
data:{pid:"0"}, //省份，直接给定键值对，值为0获得数据库中的省份
dataType:"json", //设置后端响应回来的数据格式
success:function (areaList) {
//判断返回的结果是否有值，有值为true，没值为false
if(areaList){
//将arealist结果转成jq对象，有值遍历结果集合
var html = "<option>==请选择省份==</option>";
$(areaList).each(function (i, area) {
html += "<option value='" + area.id + "'>" + area.name + "</option>";
});
//将html追加到复选框中
$("#province").html(html);
//当省份复选框被点击时，内容改变，所以给复选框注册一个改变事件
$("#province").change(function () {
//发送异步请求给服务器
$.post({
url:"AreaServlet",
async:true,
data:{pid:$(this).val()},
dataType:"json",
success:function (cityList) {
var html = "<option>==请选择城市==</option>";
$(cityList).each(function (i, city) {
html += "<option value='" + city.id + "'>" + city.name + "</option>";
});
$("#city").html(html);
}
});
});
}
},
error:function () {
alert("服务器忙......")
}
});
</script>
</body>
</html>
Servlet代码
后端的业务层，数据访问层等就不细写了，都是搬砖
package com.itheima.web;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.entity.Area;
import com.itheima.service.AreaService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet(name = "AreaServlet", urlPatterns = "/AreaServlet")
public class AreaServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
//创建业务层对象，拿到List集合
private AreaService areaService = new AreaService();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获得异步请求传递的数据
int pid = Integer.parseInt(request.getParameter("pid"));
//调用业务层对象，拿到List集合
List<Area> areaList = areaService.findAll(pid);
//创建json转换对象
ObjectMapper objectMapper = new ObjectMapper();
//调用转换对象中的方法，将List集合转换成json字符串
String jsonData = objectMapper.writeValueAsString(areaList);
//将json字符串作为响应数据传递
response.getWriter().write(jsonData);
}
}
级联方式二，直接在父标签后追加拼接字段达到级联的目的
前端代码
1.将服务器传给后端的数据封装成json字符串响应给前端，前端通过回调函数拿到数据进行遍历
2.定义一个为空字符串的变量，将遍历出来的数据拼接存放到变量中
3.将变量追加在父标签下
4.因为拼接的字符串会累加，越积越多；当改变省份时，地市应该清空值，重新写入新的拼接字符串
5.所以需要注册一个改变事件，在改变事件中定义“地市”；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="province">
<option>==请选择省份==</option>
</select>
<select id="city">
<option>==请选择城市==</option>
</select>
</body>
<script>
$.post({
url:"AreaServlet", //服务器路径
async:true, //异步处理
data:{pid:"0"}, //键值对
dataType:"json", //接收为json格式
success:function (areaList) { //回调函数拿到服务器给的结果数据
var html = ""; //定义空字符串变量
$(areaList).each(function (i,province) { //将结果数据进行遍历，拿到每一个省份
html += '<option value="' + province.id + '">' + province.name + '</option>'; //进行拼接
});
$("#province").append(html); //将拼接变量追加到父标签中
$("#province").change(function () { //创建省份标签改变事件
$.post({
url:"AreaServlet", //服务器路径
async:true, //异步处理
data:{pid:$(this).val()}, //键值对
dataType:"json", //接收为json格式
success:function (areaList) { //回调函数拿到服务器给的结果数据
var cityHtml = ""; //定义空字符串变量
$(areaList).each(function (i,city) { //将结果数据进行遍历，拿到每一个地市
cityHtml += '<option value="' + city.id + '">' + city.name +'</option>'; //进行拼接
});
$("#city").html("<option>==请选择城市==</option>"); //当省份复选框改变时，地市复选框需要重置，这里为重置
$("#city").append(cityHtml); //地市复选框重置后，再将拼接变量追加其中，即可
}
});
});
},
error:function () {
alert("服务器忙....")
}
});
</script>
</html>
后端servlet代码与方式一基本一致
标签：jquery,异步,function,标签,json,html,import,areaList 来源： https://blog.csdn.net/JustAL_/article/details/92406679