脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → 省市ajax的代码

三级联动省市ajax的代码

 更新时间：2021年07月17日 10:09:50   作者：池鱼i_  
这篇文章主要为大家详细介绍了ajax实现省市三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能给你带来帮助

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

所需要的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>

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

您可能感兴趣的文章:

相关文章

  • java实现屏幕共享功能实例分析

    java实现屏幕共享功能实例分析

    这篇文章主要介绍了java实现屏幕共享功能的方法,以实例形式分析了屏幕共享功能的客户端与服务端的详细实现方法,是非常具有实用价值的技巧,需要的朋友可以参考下
    2014-12-12
  • 【面试】Spring事务面试考点吐血整理（建议珍藏）

    【面试】Spring事务面试考点吐血整理（建议珍藏）

    本文是小编给大家收藏整理的Spring事务面试考点，非常不错，值得收藏，感兴趣的朋友参考下吧
    2019-04-04
  • Spring事务失效场景实例详解

    Spring事务失效场景实例详解

    实际项目开发中,如果涉及到多张表操作时,为了保证业务数据的一致性,大家一般都会采用事务机制,好多小伙伴可能只是简单了解一下,遇到事务失效的情况,便会无从下手,下面这篇文章主要给大家介绍了关于Spring事务失效场景的相关资料,需要的朋友可以参考下
    2022-03-03
  • Java设计模式之装饰模式原理与用法实例详解

    Java设计模式之装饰模式原理与用法实例详解

    这篇文章主要介绍了Java设计模式之装饰模式原理与用法,结合实例形式详细分析了装饰模式的概念、原理、定义与使用方法,并总结分析了装饰模式的优缺点,具有一定参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • Java排序算法之冒泡排序的原理及优化

    Java排序算法之冒泡排序的原理及优化

    这篇文章主要介绍了Java排序算法之冒泡排序的原理及优化,冒泡排序的思想很简单,遍历数组,比较相邻的两个元素,顺序错误就把它们交换,直到整个数组排序完成,因为每经过一趟排序,越小的元素会经交换而慢慢“浮”到数列的顶端,因此叫做冒泡排序,需要的朋友可以参考下
    2023-11-11
  • eclipse里没有“Dynamic Web Project“这个选项的问题解决

    eclipse里没有“Dynamic Web Project“这个选项的问题解决

    本文主要介绍了eclipse里没有“Dynamic Web Project“这个选项的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • java实现文件切片和合并的代码示例

    java实现文件切片和合并的代码示例

    这篇文章主要介绍了java实现文件切片和合并的代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Springboot MultipartFile文件上传与下载的实现示例

    Springboot MultipartFile文件上传与下载的实现示例

    在Spring Boot项目中,可以使用MultipartFile类来处理文件上传和下载操作,本文就详细介绍了如何使用,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • java输出1~100之间的全部素数的5种方式总结

    java输出1~100之间的全部素数的5种方式总结

    这篇文章主要介绍了java输出1~100之间的全部素数的5种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-02-02
  • Java实现简单的飞机大战游戏(敌机下落篇)

    Java实现简单的飞机大战游戏(敌机下落篇)

    这篇文章主要为大家详细介绍了Java实现简单的飞机大战游戏，敌机下落篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论