使用Json设置网页省份与城市的级联查询

最新推荐文章于 2023-12-13 11:04:19 发布

Mr-WuRuSong

最新推荐文章于 2023-12-13 11:04:19 发布

阅读量547

点赞数

分类专栏：前台文章标签： json ajax

本文链接：https://blog.csdn.net/qq_27010723/article/details/78061194

版权

前台专栏收录该内容

2 篇文章 0 订阅

订阅专栏

创建ShengShi3Servlet

public class ShengShi3Servlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) {
        try {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
            ShengShiDao shengshiDao =new ShengShiDao();
            List<Sheng> sheng =shengshiDao.searchSheng();
            int id=sheng.get(0).getId();
            if(request.getParameter("id") ==null){
                List<Shi> shi =shengshiDao.searchShiBySheng(id);
                Sheng selectSheng =new Sheng();
                selectSheng.setId(id);
                selectSheng.setShi(shi);
                request.setAttribute("sheng", sheng);
                request.setAttribute("slelctsheng", selectSheng);
                request.getRequestDispatcher("shengshi3.jsp").forward(request, response);
            }
            else{
                 id=Integer.parseInt(request.getParameter("id"));   
                 List<Shi> shi =shengshiDao.searchShiBySheng(id);
                 PrintWriter out =response.getWriter();
                 int shilength=shi.size();
                 String str="[";
                 for(int i=0;i<shilength;i++){
                     str+="{\"id\":"+shi.get(i).getId()+",\"name\":"+"\""+shi.get(i).getName()+"\""+"},";

                 }
                 str=str.substring(0,str.length()-1);

                 str+="]";
                 out.print(str);

            }


        } catch (UnsupportedEncodingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (ServletException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }



    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) {
        doGet(request,response);
    }

在web.xml配置访问

<servlet>
    <servlet-name>ShengShi3Servlet</servlet-name>
    <servlet-class>servlet.ShengShi3Servlet</servlet-class>
</servlet>
    <servlet-mapping>
    <servlet-name>ShengShi3Servlet</servlet-name>
    <url-pattern>/city3</url-pattern>
    </servlet-mapping>

在jsp页面使用ajax进行异步请求查询

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>省市</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#sheng").change(function() {
            $.ajax({
                url : "city3",
                type : "post",
                data : {
                    id : $(this).val()
                },
                dataType : "json",
                success : function(data) {
                var str="";
                    $.each(data,function(index,element){

                    str+="<option value="+data[index].id+">"+data[index].name+"</option>";

                    })

                    $("#shi").html(str);
                }

            })

        })

    })
</script>
<style type="text/css">
#main {
    margin: 0 auto;
    width: 300px;
    height: auto;
}
</style>
</head>

<body>
    <div id="main">
        省<select id="sheng">
            <c:forEach items="${sheng }" var="sheng">
                <option value="${sheng.id }"
                    <c:if test="${sheng.id==slelctsheng.id }">selected</c:if>>
                    ${sheng.name}</option>
            </c:forEach>

        </select> 市<select id="shi">
            <c:forEach items="${slelctsheng.shi }" var="select">
                <option value="${select.id }">${select.name}</option>
            </c:forEach>
        </select>
    </div>
</body>
</html>

思路：使用传统的方式与ajax混合使用，在第一次访问网页时，默认查询省份的第一条数据，城市绑定查询的第一个省份，在用户省份下拉框改变的时，用ajax进行触发（change事件）异步请求后台servlet根据发送的省份id查询所属市区的id，后台查询数据成功后进行json的数据格式的拼接发送后台，前台进行读取。

Mr-WuRuSong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Json设置网页省份与城市的级联查询

创建ShengShi3Servlet public class ShengShi3Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) { try { request.setCharacterEnc
复制链接

扫一扫