Ajax

QuietHRH

于 2018-08-26 20:41:27 发布

阅读量141

点赞数

分类专栏： JavaWeb Core

本文链接：https://blog.csdn.net/QuietHRH/article/details/82084166

版权

JavaWeb Core 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Ajax 省市区三级联动

JSP

<%--
  Created by IntelliJ IDEA.
  User: QuietHR
  Date: 2018/8/26
  Time: 11:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>三级联动</title>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">

       $(function () {
           //初始化省信息
           $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/PCDListServlet",
                    data:"pid=-1",
                    success:function (provinceJson) {
                        var province_str="<option value='null'>--请选择省--</option>";
                        $(provinceJson).each(function () {
                            var id = this.id;
                            var name = this.name;
                            province_str += "<option value='"+ id +"'>"+ name +"</option>";
                        })
                        $("#province").html(province_str);
                    }
               }
           );

           //省改变时 加载市信息
           $("#province").change(function () {
               var province_id = this.value;
               $("#district").html("<option value='null'>--请选择区县--</option>");

               $.post(
                   "${pageContext.request.contextPath}/PCDListServlet",
                   {"pid":province_id},
                    function (cityJson) {
                       var city_str="<option value='null'>--请选择市--</option>";
                        $(cityJson).each(function () {
                            var id = this.id;
                            var name = this.name;
                            city_str += "<option value='"+ id +"'>"+ name +"</option>";
                        })
                        $("#city").html(city_str);
                    }
               );

           });

           //市改变时 加载区县信息
           $("#city").change(function () {
               var city_id = this.value;

               $.get(
                   "${pageContext.request.contextPath}/PCDListServlet",
                   {"pid":city_id},
                   function (districtJson) {
                       var district_str="<option value='null'>--请选择区县--</option>";
                       $(districtJson).each(function () {
                           var id = this.id;
                           var name = this.name;
                           district_str += "<option value='"+ id +"'>"+ name +"</option>";
                       })
                       $("#district").html(district_str);
                   }
               )
           });

       });



    </script>
</head>
<body>

    <select id="province">
        <option value="null">--请选择省--</option>
    </select>

    <select id="city">
        <option value="null">--请选择市--</option>
    </select>

    <select id="district">
        <option value="null">--请选择区县--</option>
    </select>
</body>
</html>

web层

package com.hrh.web;

import com.hrh.domain.PCD;
import com.hrh.service.PCDService;
import flexjson.JSONSerializer;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class PCDListServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        int pid = Integer.parseInt(request.getParameter("pid"));
        PCDService pcdService=new PCDService();
        List<PCD> pcdList=pcdService.findAll(pid);
        System.out.println(pcdList);
        response.setContentType("application/json;charset=utf-8");
        String json = new JSONSerializer().exclude("*.class").serialize(pcdList);
        response.getWriter().print(json);
    }
}

service层

package com.hrh.service;

import com.hrh.dao.PCDDao;
import com.hrh.domain.PCD;

import java.sql.SQLException;
import java.util.List;

public class PCDService {
    public List<PCD> findAll(int pid) {
        PCDDao pcdDao=new PCDDao();
        List<PCD> pcdList= null;
        try {
            pcdList = pcdDao.findAll(pid);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return pcdList;
    }
}

dao层

package com.hrh.dao;

import com.hrh.domain.PCD;
import com.hrh.utils.JDBCUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.sql.SQLException;
import java.util.List;

public class PCDDao {
    public List<PCD> findAll(int pid) throws SQLException {
        QueryRunner queryRunner=new QueryRunner(JDBCUtils.getDataSource());
        String sql="select * from province_city_district where pid=?";
        List<PCD> pcdList = queryRunner.query(sql, new BeanListHandler<>(PCD.class), pid);
        return pcdList;
    }
}

QuietHRH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

Ajax 省市区三级联动JSP&lt;%-- Created by IntelliJ IDEA. User: QuietHR Date: 2018/8/26 Time: 11:26 To change this template use File | Settings | File Templates.--%&gt;&lt;%@ page conten...
复制链接

扫一扫

专栏目录