jQuery+ajax实现级联查询_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: APC 注入下一篇:string+=int的问题

jQuery+ajax实现级联查询

发布时间：2022-07-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了jQuery+ajax实现级联查询，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

jQuery+ajax实现级联查询

<%@ page contentTyPE="text/htML;charset=UTF-8" language="java" %>
<html>
<head>
    <tITle>$Title$</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:"PRovinceservlet",
                dateType:"json",
                success:function (resp) {
                    // alert(resp);
                    $("#pro").empty();
                    $.each(resp,function (i,n) {
                        $("#pro").append("<option value='"+n.id+"'>"+n.name+"</option>")
                    })

                }
            })

            $("#pro").change(function () {
                VAR $obj=$("#pro>option:selected");
                var provinceid= $obj.val()
                $.ajax({
                    url:"cityservlet",
                    data:{"provinceId":provinceId},
                    dateType:"json",
                    success:function (resp) {
                        // alert(resp);
                        $("#city").empty();
                        $.each(resp,function (i,n) {
                            $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>")
                        })

                    }
                })

            })

        })
    </script>
</head>
<body>
<table align="center">
    <tr>
        <td>
            省份：
        </td>
        <td>
            <select id="pro">
                <option value="0">请选择省份</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            城市：
        </td>
        <td>
            <select id="city">
                <option value="0"></option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>

主页

省份类

jQuery+ajax实现级联查询

package com.g0rez.entity;

public class Province {
    private Integer id;
    private String name;
    private String jiancheng;
    private String shenghui;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getJiancheng() {
        return jiancheng;
    }

    public void setJiancheng(String jiancheng) {
        this.jiancheng = jiancheng;
    }

    public String getShenghui() {
        return shenghui;
    }

    public void setShenghui(String shenghui) {
        this.shenghui = shenghui;
    }
}

省份类

城市类

jQuery+ajax实现级联查询

package com.g0rez.entity;

public class City {
    private Integer id;
    private String name;
    private Integer provinceid;

    public City() {
    }

    public City(Integer id, String name, Integer provinceid) {
        this.id = id;
        this.name = name;
        this.provinceid = provinceid;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getProvinceid() {
        return provinceid;
    }

    public void setProvinceid(Integer provinceid) {
        this.provinceid = provinceid;
    }
}

城市类

查询省份的DAO类

jQuery+ajax实现级联查询

package com.g0rez.dao;

import com.g0rez.entity.Province;

import java.SQL.*;
import java.util.ArrayList;
import java.util.List;

public class provinceDao {
    public List<Province> queryProvince(){
        List<Province> list= new ArrayList<>();
        Province province =null;
        Connection con = null;
        Preparedstatement ps= null;
        ResultSet rs = null;
        String sql= "";
        String url="jdbc:MySQL://localhost:3306/sprinGDB";
        String username="root";
        String password="root";
        try {
            Class.forName("com.mysql.jdbc.Driver");
            con = DriverManager.getConnection(url,username,password);
            sql="select id,name From province order by id";
            ps= con.preparestatement(sql);
            rs= ps.executeQuery();
            while(rs.next()){
                province = new Province();
                province.setId(rs.getInt("id"));
                province.setName(rs.getString("name"));
                list.add(province);
            }

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            if (con != null) {
                try {
                    con.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }

        return list;
    }
}

查询省份dao

查询城市的dao类

jQuery+ajax实现级联查询

package com.g0rez.dao;

import com.g0rez.entity.City;
import com.g0rez.entity.Province;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class cityDao {
    public List<City> queryCity(Integer provinceId){
        List<City> list= new ArrayList<>();
        City city =null;
        Connection con = null;
        PreparedStatement ps= null;
        ResultSet rs = null;
        String sql= "";
        String url="jdbc:mysql://localhost:3306/springdb";
        String username="root";
        String password="root";
        try {
            Class.forName("com.mysql.jdbc.Driver");
            con = DriverManager.getConnection(url,username,password);
            sql="select id,name from city where provinceid=?";
            ps= con.prepareStatement(sql);
            ps.setInt(1,provinceId);
            rs= ps.executeQuery();
            while(rs.next()){
                city = new City();
                city.setId(rs.getInt("id"));
                city.setName(rs.getString("name"));
                list.add(city);
            }

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            if (con != null) {
                try {
                    con.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }

        return list;
    }
}

查询城市dao

处理查询省份请求的servlet

jQuery+ajax实现级联查询

package com.g0rez.controller;

import com.fasterXMl.jackson.databind.ObjectMapper;
import com.g0rez.dao.provinceDao;
import com.g0rez.entity.Province;

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.io.PrintWriter;
import java.util.List;

public class provinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        provinceDao pr = new provinceDao();
        List<Province> list =null;
        String JSON = "{}";
        list= pr.queryProvince();
        if(list!=null){
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(list);
            response.setContentType("application/json;charset=utf-8");
            PrintWriter pw = response.getWriter();
            pw.print(json);
            pw.flush();
            pw.close();
        }



    }
}

省份servlet

处理查询城市请求的servlet

jQuery+ajax实现级联查询

package com.g0rez.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.g0rez.dao.cityDao;
import com.g0rez.dao.provinceDao;
import com.g0rez.entity.City;
import com.g0rez.entity.Province;

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.io.PrintWriter;
import java.util.List;

public class cityServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        cityDao cityDao = new cityDao();
        List<City> list =null;
        String json = "{}";
        String provinceId=request.getParameter("provinceId");
        list= cityDao.queryCity(Integer.valueOf(provinceId));
        if(list!=null){
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(list);
            response.setContentType("application/json;charset=utf-8");
            PrintWriter pw = response.getWriter();
            pw.print(json);
            pw.flush();
            pw.close();
        }
    }
}

城市servlet

结果图：

@H_288_1268@

脚本宝典总结

以上是脚本宝典为你收集整理的jQuery+ajax实现级联查询全部内容，希望文章能够帮你解决jQuery+ajax实现级联查询所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：java javascript list load load mysql mysql php python String while while 程序员程序员

上一篇: APC 注入下一篇:string+=int的问题

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15

全站导航更多