ajax实现三级联动省市的代码

本篇内容主要讲解“ajax实现三级联动省市的代码”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ajax实现三级联动省市的代码”吧!

目录

• 创建数据库

• 首先创建 City 和 Province 类 给getter setter tostring 以及 构造方法 Province类

• City类

• 连接数据库

• 创建 接口 ProvinceInfoDao

• 实例化对象ProvinceInfoDaoImpl

• 以及CityInfoDao接口

• CityInfoDaoImpl实例化对象

• FindProvinceServlet

• FindCityPidServlet

• 最后是jsp页面

• 总结

我只写到了市剩下的区可以复制粘贴的很简单

所需要的jar包有

代码如下

创建数据库

CREATE database provinces CHARACTER  set utf8; use provices;  CREATE table  province ( pid INT PRIMARY KEY  auto_increment, pname varchar(20) ); INSERT into province VALUES (null,"河南省"); INSERT into province VALUES (null,"海南省"); INSERT into province VALUES (null,"台湾省"); INSERT into province VALUES (null,"山东省"); INSERT into province VALUES (null,"河北省"); CREATE table  city ( cid INT PRIMARY KEY  auto_increment, cname varchar(20), pid int   ); INSERT into city VALUES(null,"漯河市",1); INSERT into city VALUES(null,"菏泽曹县",4); INSERT into city VALUES(null,"高雄市",3); INSERT into city VALUES(null,"保定",5); INSERT into city VALUES(null,"三亚市",2);

首先创建 City 和 Province 类 给getter setter tostring 以及 构造方法 Province类

package cn.hp.model; public class Province {     private  int pid;     private  String pname;     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 + '\'' +                 '}';     }     public Province(int pid, String pname) {         this.pid = pid;         this.pname = pname;     }     public Province() {     } }

City类

package cn.hp.model; public class City {     private  int cid;     private String cname;     private  int pid;     public City() {     }     public int getCid() {         return cid;     }     @Override     public String toString() {         return "City{" +                 "cid=" + cid +                 ", cname='" + cname + '\'' +                 ", pid=" + pid +                 '}';     }     public void setCid(int cid) {         this.cid = cid;     }     public String getCname() {         return cname;     }     public City(String cname, int pid) {         this.cname = cname;         this.pid = pid;     }     public void setCname(String cname) {         this.cname = cname;     }     public int getPid() {         return pid;     }     public void setPid(int pid) {         this.pid = pid;     }     public City(int cid, String cname, int pid) {         this.cid = cid;         this.cname = cname;         this.pid = pid;     } }

连接数据库

package cn.hp.util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public class ConnDemo {	private static String Driver ="com.mysql.jdbc.Driver";	private static String Url = "jdbc:mysql://localhost:3306/provinces?characterEncoding=utf8";	private static String user ="root";	private static String pwd ="123456";	public static Connection conn;	public static Connection getConn() {	try {	Class.forName(Driver);	conn = DriverManager.getConnection(Url, user, pwd);	} catch (Exception e) {	// TODO Auto-generated catch block	e.printStackTrace();	}	return conn;	}	public static void getClose() {	try {	if (conn != null) {	conn.close();	}	} catch (SQLException e) {	// TODO Auto-generated catch block	e.printStackTrace();	}	}	// �������ݿ�����	public static void main(String[] args) {	System.out.println(getConn());	if (getConn()!=null) {	System.out.println("���ӳɹ�");	}	} }

创建 接口 ProvinceInfoDao

package cn.hp.dao; import cn.hp.model.Province; import java.util.List; public interface ProvinceInfoDao {     public  List<Province> findAll(); }

实例化对象ProvinceInfoDaoImpl

package cn.hp.dao; import cn.hp.model.Province; import cn.hp.util.ConnDemo; 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 ProvinceInfoDaoImpl implements ProvinceInfoDao {     @Override     public List<Province> findAll() {      Connection conn=   ConnDemo.getConn();      List<Province> list= new ArrayList<Province>();      String sql="select * from provice";         try {             PreparedStatement ps= conn.prepareStatement(sql);           ResultSet rs=  ps.executeQuery();           while (rs.next()){               Province p= new Province();               p.setPid(rs.getInt(1));               p.setPname(rs.getString(2));               list.add(p);           }         } catch (SQLException e) {             e.printStackTrace();         }         return list;     } }

以及CityInfoDao接口

package cn.hp.dao; import cn.hp.model.City; import java.util.List; public interface CityInfoDao {     public  List<City>findAllCity(int pid); }

CityInfoDaoImpl实例化对象

package cn.hp.dao; import cn.hp.model.City; import cn.hp.model.Province; import cn.hp.util.ConnDemo; 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 CityInfoDaoImpl implements  CityInfoDao {     @Override     public List<City> findAllCity(int pid) {         Connection conn=  ConnDemo.getConn();         List<City> list= new ArrayList<City>();         String sql="select * from city where pid =?";         try {             PreparedStatement ps= conn.prepareStatement(sql);             ps.setInt(1,pid);             ResultSet rs=  ps.executeQuery();             while (rs.next()){                 City c= new City();                c.setCid(rs.getInt(1));                c.setCname(rs.getString(2));                c.setPid(rs.getInt(3));                 list.add(c);             }         } catch (SQLException e) {             e.printStackTrace();         }         return list;     } }

写servlet FindProvinceServlet 以及FindCityPidServlet

FindProvinceServlet

package cn.hp.servlet; import cn.hp.dao.ProvinceInfoDao; import cn.hp.dao.ProvinceInfoDaoImpl; import cn.hp.model.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 FindProvinceServlet extends HttpServlet {     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {     }     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         request.setCharacterEncoding("utf-8");         response.setContentType("text/html;charset=utf-8");         ProvinceInfoDao pid=new ProvinceInfoDaoImpl();         List<Province> plist =pid.findAll();         response.getWriter().write(JSONObject.toJSONString(plist));     } }

FindCityPidServlet

package cn.hp.servlet; import cn.hp.dao.CityInfoDao; import cn.hp.dao.CityInfoDaoImpl; import cn.hp.model.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("/findCityByPid") public class FindCityByPidServlet extends HttpServlet {     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {     }     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         request.setCharacterEncoding("utf-8");         response.setContentType("text/html;charset=utf-8");         String id = request.getParameter("id");         CityInfoDao cid= new CityInfoDaoImpl();         List<City> clist  = cid.findAllCity(Integer.parseInt(id));         response.getWriter().write(JSONObject.toJSONString(clist));     } }

最后是jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html>   <head>     <script src="js/jquery-3.6.0.js"></script>     <title>$Title$</title>       <script>           $(function () {              $.ajax({                  type:"get",                  url:"findProvince",                  dataType:"json",                  success:function (data) {                   var obj=  $("#province");                   for (var i=0;i<data.length;i++){                       // var  ob= "<option value='+data[i].pid+"'>"+data[i].pname+"</option>"                       var  ob= "<option value='"+data[i].pid+"'>"+data[i].pname+"</option>"                       obj.append(ob)                      }                  }              })           })       </script>   </head>   <body>    <select name="province" id="province">      <option value="0">请选择</option>    </select>省    <select name="city" id="city">      <option value="0">请选择</option>    </select>市    <select name="street" id="street">      <option value="0">请选择</option>    </select>区   </body> <script>     $("#province").change(function () {        $("#city option").remove();        $.ajax({            type:"get",            url:"findCityByPid?id="+$("#province").val(),            dataType: "json",            success:function (data) {                var obj=  $("#city");                for (var i=0;i<data.length;i++){                    var  ob= "<option value='"+data[i].cid+"'>"+data[i].cname+"</option>"                    obj.append(ob)                }            }        })     }); </script> </html>

到此，相信大家对“ajax实现三级联动省市的代码”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！