jquery，json，ajax(异步处理请求)省市二级联下拉框联动_练习笔记

本文链接：https://blog.csdn.net/JustAL_/article/details/92406679

省市二级联下拉框联动_练习笔记

级联方式一，在父标签下重写标签体
级联方式二，直接在父标签后追加拼接字段达到级联的目的
- 前端代码
- 后端servlet代码与方式一基本一致

级联方式一，在父标签下重写标签体

数据库数据

前端代码

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>==请选择省份=