新人了解~~~不连数据库的三级联动

最新推荐文章于 2022-04-19 09:36:14 发布

SAZA

最新推荐文章于 2022-04-19 09:36:14 发布

阅读量148

点赞数 4

文章标签： servlet js

本文链接：https://blog.csdn.net/qq_50077219/article/details/118073488

版权

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<html>
<head>
    <title>Title</title>
    <select name="" id="cityName">
        <%--<option value=""></option>--%>
    </select>
    <select name="" id="cn">

    </select>

    <select name="" id="cs">

    </select>

</head>
<body>




<script>
    $(function() {
        $.ajax({
            url:'/SanJiServlet',
            type:'get',
            success:function (res) {
                 console.log(res)
                // 遍历json，
                $.each(res.citylist,function (index, item) {
                     var cityName= item.p;
                  var cityNameDom=   $("<option value="+cityName+">"+ cityName +"</option>")
                    cityNameDom.appendTo("#cityName");
                    var citys= item.c;
                    $.each(citys,function (index, item) {
                        var  cn=   item.n;
                        var cnDom=$("<option value="+cn+">"+ cn +"</option>")
                        cnDom.appendTo("#cn");
                        
                        $.each(item.a,function (index,item) {
                            var  cs=   item.s;
                            var csDom=$("<option value="+cs+">"+ cs +"</option>")
                            csDom.appendTo("#cs");
                        })
                    });
                })

            },
            dataType:'json'
        });
    })
</script>




</body>
</html>

servlet：

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.io.PrintWriter;

@WebServlet("/SanJiServlet")
public class SanJiServlet extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        response.setCharacterEncoding("utf-8");

             String x= "{\n" +
                     "  \"citylist\": [{\n" +
                     "    \"p\": \"北京市\",\n" +
                     "    \"c\": [{\n" +
                     "      \"n\": \"北京\",\n" +
                     "      \"a\": [{\n" +
                     "        \"s\": \"东城区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"西城区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"朝阳区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"丰台区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"石景山区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"海淀区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"门头沟区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"房山区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"通州区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"顺义区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"昌平区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"大兴区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"怀柔区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"平谷区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"密云区\"\n" +
                     "      }, {\n" +
                     "        \"s\": \"延庆区\"\n" +
                     "      }]\n" +
                     "    }]\n" +
                     "  }]}";


        PrintWriter writer = response.getWriter();
        writer.println(x);
        writer.close();



    }


}

SAZA

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
新人了解~~~不连数据库的三级联动

<%@ page contentType="text/html;charset=UTF-8" language="java" %><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><html><head> <title>Title</title> <select name="" id="cityName.
复制链接

扫一扫