jquery级联省份关联例子

最新推荐文章于 2021-03-06 17:18:12 发布

syf_wfl

最新推荐文章于 2021-03-06 17:18:12 发布

阅读量121

点赞数

文章标签： ajax jquery servlet jdbc

本文链接：https://blog.csdn.net/wflsyf/article/details/112788301

版权

首先是导包
jquery-3.4.1.js
jackson-annotations-2.9.0.jar
jackson-core-2.9.0.jar
jackson-databind-2.9.0.jar
mysql-connector-java-8.0.22.jar
servlet-api.jar

然后是jsp的书写

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>省市级联查询</title>

  </head>
  <body>
      <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
      <script type="text/javascript">
          function loadajax(){
            $.ajax({url:"see",dataType:"json",success:function (resp) {
                //测试是否收到
                //alert(resp); 能够拿到数据
                //删除旧数据
                $("#province").empty();
                //遍历json数组用append放在选择框内
                $(resp).each(function (index,element) {
                  let data=element.name;
                  $("#province").append("<option value="+element.id+">"+data+"</option>");
                });
              }})
          }
          $(function () {
            loadajax();
            //$(function ()在页面的dom对象加载完成后执行的函数，在此发起ajax
            //绑定按钮
              $("#loadbt").on("click",function () {
                loadajax();
                //测试省份的value是否正确
                // $("#loadct").on("click",function () {
                //       alert($("#province").val());
                // })
              })
            //给省份的select绑定一个change事件，当select内容发生变化时，触发事件
            $("#province").on("change",function () {
              // $.ajax({url:"sea",data:{"id":$("#province").val()},dataType:"json",success:function (resp){
              //     //删除旧数据
              //     $("#city").empty();
              //     //遍历json数组用append放在选择框内
              //     $(resp).each(function (index,element) {
              //       let data=element.name;
              //       $("#city").append("<option value="+element.id+">"+data+"</option>");
              //     });
              //   }})
              //优化用get
              $.get("sea",{"id":$("#province").val()},callback,"json")})})
          //定义一个处理返回数据的函数
          function callback(resp) {
             $("#city").empty();
              //遍历json数组用append放在选择框内
              $(resp).each(function (index,element) {
              $("#city").append("<option value="+element.id+">"+element.name+"</option>");
            })
          }
      </script>
    <div>
      <table border="2px" align="center">
        <tr align="center">
          <td colspan="3">省市级联查询</td>
        </tr>
          <tr>
            <td>省份:</td>
            <td>
              <select id="province">
                <option value="0">请选择....</option>
              </select>
            </td>
            <td>
              <input type="button" value="load数据" id="loadbt">
            </td>
          </tr>
        <tr>
          <td>城市</td>
          <td colspan="2">
            <select id="city">
              <option>请选择....</option>
            </select>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Web.xml的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
<!--    声明查询所有省份的servlet-->
    <servlet>
        <servlet-name>oneServlet</servlet-name>
        <servlet-class>ser.oneServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>oneServlet</servlet-name>
        <url-pattern>/see</url-pattern>
    </servlet-mapping>
    <!--    声明查询所有省份的servlet完成-->
<!-- 声明查询省份所含城市   -->
    <servlet>
        <servlet-name>twoServlet</servlet-name>
        <servlet-class>ser.twoServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>twoServlet</servlet-name>
        <url-pattern>/sea</url-pattern>
    </servlet-mapping>
<!-- 声明查询省份所含城市完成   -->
</web-app>

Dao

package Dao;

import P.City;
import P.Province;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class searchDao {
    JDBC jdbc=new JDBC();
    //查询所有的省份信息
    public List<Province> GetProvince(){
        String sql="select id,name,jiancheng,shenghui from province order by id";
        PreparedStatement pre=jdbc.createStatement(sql);
        ResultSet res;
        List<Province> province=new ArrayList<>();
        Province p=null;
        try {
            res= pre.executeQuery();
            while (res.next()){
                p=new Province();
                p.setId(res.getInt("id"));
                p.setName(res.getString("name"));
                p.setJiancheng(res.getString("jiancheng"));
                p.setShenghui(res.getString("shenghui"));
                province.add(p);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            jdbc.close();
        }
        return province;
    }
    //查询省份下面的所有城市
    public List<City> GetCity(Integer provinceid){
        List<City> city=new ArrayList<>();
        String sql="select id,name from city where provinceid=?";
        PreparedStatement pre=jdbc.createStatement(sql);
        ResultSet res;
        City c=null;
        try {
            pre.setInt(1,provinceid);
            res=pre.executeQuery();
            while (res.next()){
                c=new City();
                c.setId(res.getInt("id"));
                c.setName(res.getString("name"));
                city.add(c);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            jdbc.close();
        }
        return city;
    }
}

还有Servlet,都是用的get方法

        response.setContentType("text/html;charset=utf-8");
        //调用dao获取所有省份的信息，是一个list集合
        searchDao search=new searchDao();
        List<Province> provinces= search.GetProvince();
        String json=null;
        PrintWriter pw;
        if (null!=provinces){
            ObjectMapper om=new ObjectMapper();
            json=om.writeValueAsString(provinces);
        }
        pw= response.getWriter();
        pw.print(json);
        pw.flush();
        pw.close();

        searchDao search=new searchDao();
        response.setContentType("text/html;charset=utf-8");
        String provinceid= request.getParameter("id");
        List<City> city= search.GetCity(Integer.parseInt(provinceid));
        String c=null;
        if (null!=city){
            ObjectMapper om=new ObjectMapper();
            c=om.writeValueAsString(city);
        }
        PrintWriter pw= response.getWriter();
        pw.print(c);
        pw.flush();
        pw.close();