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

最新推荐文章于 2025-11-21 21:40:25 发布

原创最新推荐文章于 2025-11-21 21:40:25 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #js

这个博客展示了一个使用jQuery实现的Ajax三级联动下拉框的例子。通过调用/SanJiServlet获取JSON数据，动态填充城市、区县和街道的选项。Servlet返回了北京市的各个区县及街道信息，实现了前端页面的动态交互效果。

<%@ 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();



    }


}