jQuery-Ajax技术二

jQuery-Ajax技术二（三级联动）

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

---

实例：

数据库建表：

---

实体类：

package cn.zbw.domain;

//   省
public class Province {
    private int pid;
    private String pname;

    public Province(int pid, String pname) {
        this.pid = pid;
        this.pname = pname;
    }

    public Province() {
    }

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    @Override
    public String toString() {
        return "Province{" +
                "pid=" + pid +
                ", pname='" + pname + '\'' +
                '}';
    }
}

package cn.zbw.domain;

//   市
public class City {
    private int cid;
    private String cname;
    private int pid;

    public City(int cid, String cname, int pid) {
        this.cid = cid;
        this.cname = cname;
        this.pid = pid;
    }

    public City() {
    }

    public int getCid() {
        return cid;
    }

    public void setCid(int cid) {
        this.cid = cid;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    @Override
    public String toString() {
        return "City{" +
                "cid=" + cid +
                ", cname='" + cname + '\'' +
                ", pid=" + pid +
                '}';
    }
}

package cn.zbw.domain;

//   学校
public class School {
    private int sid;
    private String sname;
    private int cid;

    public School(int sid, String sname, int cid) {
        this.sid = sid;
        this.sname = sname;
        this.cid = cid;
    }

    public School() {
    }

    public int getSid() {
        return sid;
    }

    public void setSid(int sid) {
        this.sid = sid;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public int getCid() {
        return cid;
    }

    public void setCid(int cid) {
        this.cid = cid;
    }

    @Override
    public String toString() {
        return "School{" +
                "sid=" + sid +
                ", sname='" + sname + '\'' +
                ", cid=" + cid +
                '}';
    }
}

---

连接数据库的和上一篇一样 只需要修改连接数据库的名字就行。

---

定义接口和方法：

package cn.zbw.dao;

import cn.zbw.domain.Province;

import java.util.List;

//   查找所有的省份
public interface IProvinceDao {
    public List<Province> findAll();
}

package cn.zbw.dao;

import cn.zbw.domain.City;

import java.util.List;

//   通过pid查找所有的市
public interface ICityDao {
    public List<City> findCityById(int id);
}

package cn.zbw.dao;

import cn.zbw.domain.School;

import java.util.List;

//   通过cid查找所有的学校
public interface ISchoolDao {
    public List<School> findSchoolById(int id);
}

---

接口实现类实现其方法：

package cn.zbw.dao.impl;

import cn.zbw.dao.IProvinceDao;
import cn.zbw.domain.Province;
import cn.zbw.utils.DBHelper;

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

public class IProvinceDaoImpl implements IProvinceDao {
//    查找所有的省份
    @Override
    public List<Province> findAll() {
        Connection conn = DBHelper.getConn();
        List<Province> lists = new ArrayList<Province>();
        String sql = "select * from tb_province";
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            ResultSet rs = ps.executeQuery();
            while (rs.next()){
                Province pro = new Province();
                pro.setPid(rs.getInt(1));
                pro.setPname(rs.getString(2));
                lists.add(pro);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return lists;
    }
}

package cn.zbw.dao.impl;

import cn.zbw.dao.ICityDao;
import cn.zbw.domain.City;
import cn.zbw.utils.DBHelper;

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

public class ICityDaoImpl implements ICityDao {
//    查找所有的市
    @Override
    public List<City> findCityById(int id) {
        Connection conn = DBHelper.getConn();
        List<City> lists = new ArrayList<City>();
        String sql = "select * from tb_city where pid=?";
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setInt(1,id);
            ResultSet rs = ps.executeQuery();
            while (rs.next()){
                City ci = new City();
                ci.setPid(rs.getInt(3));
                ci.setCname(rs.getString(2));
                ci.setCid(rs.getInt(1));
                lists.add(ci);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return lists;
    }
}

package cn.zbw.dao.impl;

import cn.zbw.dao.ISchoolDao;
import cn.zbw.domain.School;
import cn.zbw.utils.DBHelper;

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

public class ISchoolDaoImpl implements ISchoolDao {
//    查找所有的学校
    @Override
    public List<School> findSchoolById(int id) {
        Connection conn = DBHelper.getConn();
        List<School> lists = new ArrayList<>();
        String sql = "select * from tb_school where cid=?";
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setInt(1,id);
            ResultSet rs = ps.executeQuery();
            while (rs.next()){
                School sc = new School();
                sc.setSid(rs.getInt(1));
                sc.setSname(rs.getString(2));
                sc.setCid(rs.getInt(3));
                lists.add(sc);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return lists;
    }
}

---

web-Servlet类：

package cn.zbw.web.servlet;

import cn.zbw.dao.IProvinceDao;
import cn.zbw.dao.impl.IProvinceDaoImpl;
import cn.zbw.domain.Province;
import com.alibaba.fastjson.JSONObject;

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.util.List;

@WebServlet("/findprovince")
public class FindProvince extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        IProvinceDao ipd = new IProvinceDaoImpl();
        List<Province> lists = ipd.findAll();
        response.getWriter().write(JSONObject.toJSONString(lists));
    }
}

package cn.zbw.web.servlet;

import cn.zbw.dao.ICityDao;
import cn.zbw.dao.impl.ICityDaoImpl;
import cn.zbw.domain.City;
import com.alibaba.fastjson.JSONObject;

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.util.List;

@WebServlet("/findcity")
public class FindCity extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        ICityDao ici = new ICityDaoImpl();
        String pid = request.getParameter("pid");
        List<City> citys = ici.findCityById(Integer.parseInt(pid));
        response.getWriter().write(JSONObject.toJSONString(citys));
    }
}

package cn.zbw.web.servlet;

import cn.zbw.dao.ISchoolDao;
import cn.zbw.dao.impl.ISchoolDaoImpl;
import cn.zbw.domain.School;
import com.alibaba.fastjson.JSONObject;

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.util.List;

@WebServlet("/findschool")
public class FindSchool extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String cid = request.getParameter("cid");
        ISchoolDao isc = new ISchoolDaoImpl();
        List<School> schools = isc.findSchoolById(Integer.parseInt(cid));
        response.getWriter().write(JSONObject.toJSONString(schools));
        System.out.println(JSONObject.toJSONString(schools));
    }
}

---

JSP页面：

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/03/03
  Time: 上午 11:17
  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.8.3.js"></script>
</head>
<body>

    <script>
        $(function () {
            $.ajax({
                type:"get",
                url:"findprovince",
                dataType:"json",
                success:function (data) {
                    var pro = $("#province");
                    for(var i=0;i<data.length;i++){
                        var pr="<option value='"+data[i].pid+"'>"+data[i].pname+"</option>";
                        pro.append(pr);
                    }
                }
            });
        });
    </script>


    <select name="province" id="province">
        <option value="0">请选择</option>
    </select>省

    <script>
        $("#province").change(function () {
            $("#city option").remove();
            $.ajax({
                type:"get",
                url:"findcity?pid="+$("#province").val(),
                dataType:"json",
                success:function (data) {
                    var cio = $("#city");
                    for(var i=0;i<data.length;i++){
                        var ci="<option value='"+data[i].cid+"'>"+data[i].cname+"</option>";
                        cio.append(ci);
                    }
                }
            });
        });
    </script>

    <select name="city" id="city">
        <option value="0">请选择</option>
    </select>市

    <script>
        $("#city").change(function () {
            $("#school option").remove();
            $.ajax({
                type:"get",
                url:"findschool?cid="+$("#city").val(),
                dataType:"json",
                success:function (data) {
                    var sco = $("#school");
                    for(var i=0;i<data.length;i++){
                        var sc="<option value='"+data[i].sid+"'>"+data[i].sname+"</option>";
                        sco.append(sc);
                    }
                }
            })
        })
    </script>

    <select name="school" id="school">
        <option value="0">请选择</option>
    </select>学校

</body>
</html>

---

结果是：

---

不忘初心，砥砺前行