文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-20 16:47

关注

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

目录

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

所需要的jar包有

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

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

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

代码如下

创建数据库

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 blocke.printStackTrace();}return conn;}public static void getClose() {try {if (conn != null) {conn.close();}} catch (SQLException e) {// TODO Auto-generated catch blocke.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实现三级联动省市的代码”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯