三級(jí)聯(lián)動(dòng)省市ajax的代碼
更新時(shí)間：2021年07月17日 10:09:50 作者：池魚i_
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)省市三級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能給你帶來幫助
我只寫到了市剩下的區(qū)可以復(fù)制粘貼的很簡單
所需要的jar包有
代碼如下
創(chuàng)建數(shù)據(jù)庫
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,"臺(tái)灣省"); 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);
首先創(chuàng)建 City 和 Province 類 給getter setter tostring 以及 構(gòu)造方法 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;
}
}
連接數(shù)據(jù)庫
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("���ӳɹ�");
}
}
}
創(chuàng)建 接口 ProvinceInfoDao
package cn.hp.dao;
import cn.hp.model.Province;
import java.util.List;
public interface ProvinceInfoDao {
public List<Province> findAll();
}
實(shí)例化對(duì)象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實(shí)例化對(duì)象
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">請(qǐng)選擇</option>
</select>省
<select name="city" id="city">
<option value="0">請(qǐng)選擇</option>
</select>市
<select name="street" id="street">
<option value="0">請(qǐng)選擇</option>
</select>區(qū)
</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>
總結(jié)
本篇文章就到這里了，希望能給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
您可能感興趣的文章:
相關(guān)文章
springboot接收前端參數(shù)的四種方式圖文詳解
Spring Boot可以通過多種方式接收前端傳遞的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于springboot接收前端參數(shù)的四種方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
maven基礎(chǔ)教程——簡單了解maven的特點(diǎn)與功能
這篇文章主要介紹了Maven基礎(chǔ)教程的相關(guān)資料，文中講解非常細(xì)致，幫助大家開始學(xué)習(xí)maven，感興趣的朋友可以了解下2020-07-07
IntelliJ?IDEA?2022.1.1?沒有CVS的過程分析
這篇文章主要介紹了IntelliJ?IDEA?2022.1.1?沒有CVS的過程解析,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Java使用FilenameFilter查找出目錄下指定后綴的文件示例
這篇文章主要介紹了Java使用FilenameFilter查找出目錄下指定后綴的文件,結(jié)合實(shí)例形式分析了java基于FilenameFilter類的文件遍歷、查找相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Java eclipse doc文檔生成流程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
redisson 實(shí)現(xiàn)分布式鎖的源碼解析
這篇文章主要介紹了redisson 實(shí)現(xiàn)分布式鎖的源碼解析,通過模擬一個(gè)商品秒殺的場景結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
Mybatis-plus使用selectList查詢數(shù)據(jù)為null的問題及解決辦法
這篇文章主要介紹了Mybatis-plus使用selectList查詢數(shù)據(jù)為null的問題及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Java集合Set的簡單使用解析,Set接口是Collection的子接口,Set接口相較于Collection接口沒有提供額外的方法,Set 集合不允許包含相同的元素,如果試把兩個(gè)相同的元素加入同一個(gè) Set 集合中,則添加操作失敗,需要的朋友可以參考下2023-11-11
volatile 是一種輕量級(jí)的同步機(jī)制,它能保證共享變量的可見性,同時(shí)禁止重排序保證了操作的有序性,但是它無法保證原子性,本文給大家總結(jié)了Java olatile的使用場景有哪些,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Java類初始化順序詳解,java語言在使用過程中最先開始就是初始化，在工作中如果遇到什么問題需?要定位往往到最后也可能是初始化的問題，因此掌握初始化的順序很重要,需要的朋友可以參考下2023-08-08