AJAX——在不刷新整个网页的情况下，与服务端做数据交互

最新推荐文章于 2021-08-06 16:22:28 发布

小场面丨不慌

最新推荐文章于 2021-08-06 16:22:28 发布

阅读量513

点赞数

分类专栏：后端文章标签： ajax java jsp

转载须注明本博客地址

本文链接：https://blog.csdn.net/w1911026171/article/details/106922832

版权

后端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

省市级联效果

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>provByCity</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            //页面加载完成后立即将数据填充在select中
            $.ajax({
                url:"provinceByCityServlet",
                dataType:"json",
                data:{
                    temp:"province"
                },
                success:function (province) {
                    //将获取到的省份信息显示到select中
                    for(i = 0;i<province.length;i++){
                        $("#province").append("<option value='"+province[i].provId+"'>"+province[i].provName+"</option>")
                    }
                }
            }) 
            //在选择省份后显示城市
            $("#province").change(function () {
                //获取省份的value值
                var provinceId = $(this).val();
                if(parseInt(provinceId) != -1){
                    //发送异步请求
                    $.ajax({
                        url:"provinceByCityServlet",
                        dataType:"json",
                        data:{
                            temp:"city",
                            provId:provinceId
                        },
                        success:function (city) {
                            $("#city").html("<option>--请选择--</option>");
                            for(i = 0;i<city.length;i++){
                                $("#city").append("<option value='"+city[i].cityId+"'>"+city[i].cityName+"</option>")
                            }
                        }
                    })
                }else {
                    $("#city").html("<option>--请选择--</option>");
                }
            })
        })
    </script>
</head>
<body>
<select id="province">
    <option value="-1">--请选择--</option>
</select>
<select id="city">
    <option>--请选择--</option>
</select>
</body>
</html>

servlet代码

String temp = request.getParameter("temp");
ProvinceService service = new ProvinceServiceImpl();
JSONArray array = null;
if("province".equals(temp)){
    List<Province> list = service.selectProv();
    array = JSONArray.fromObject(list);
}
if ("city".equals(temp)){
    String provId = request.getParameter("provId");
    List<City> cityList = service.selectCity(Integer.parseInt(provId));
    array = JSONArray.fromObject(cityList);
}
System.out.println(array);
response.getWriter().print(array);

小场面丨不慌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX——在不刷新整个网页的情况下，与服务端做数据交互

省市级联效果<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>provByCity</title> <script src="js/jquery-3.4.1.js"></script> <script> $(function () {
复制链接

扫一扫