在这里，我们将给大家分享关于js省市区三级联动代码的知识，让您更了解js省市区三级联动代码源代码的本质，同时也会涉及到如何更有效地Ajax-省市区三级联动、Ajax实现省市区三级联动、Ajax实现省市
在这里，我们将给大家分享关于js省市区三级联动代码的知识，让您更了解js省市区三级联动代码源代码的本质，同时也会涉及到如何更有效地Ajax-省市区三级联动、Ajax实现省市区三级联动、Ajax实现省市区三级联动实例代码、ajax省市区三级联动的内容。
本文目录一览：
js省市区三级联动代码（js省市区三级联动代码源代码）
这次给大家带来js省市区三级联动代码，js实现省市区三级联动代码的注意事项有哪些，下面就是实战案例，一起来看一下。前言
插件功能只满足我司业务需求，如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个star
准备
<p id=wrap></p>
页面中的容器标签不限制，只需给个id就行
var address = new Address({
wrapId: 'wrap',
showArr: ['provinces','citys','areas'],
beforeCreat:function(){
console.log(beforeCreat)
},
afterCreat:function(){
console.log('afterCreat');
}
})wrapId:wrap // 此处的wrap就是上面容器的id showArr: ['provinces','citys','areas'] // 此处分别代表省、市、区容器的id
举个例子：如果传递的数组['provinces','citys','areas']长度为3，那么将会出现省市区，数组中三个字符串分别是省、市、区容器的id
如传递的数组['provinces','citys']长度为2个，那么将会出现省市，数组中的两个字符串分别是省、市容器的id
如数组长度为1的时候就不说了
beforeCreat 插件开始创建前执行的回调函数
afterCreat 插件创建完成后执行的回调函数
预览
相信看了本文案例你已经掌握了方法，更多精彩请关注小编网其它相关文章！
推荐阅读：
JavaScript的异步加载详解
JS运动缓冲效果的封装函数如何使用
Ajax-省市区三级联动
三级联动：
此例在ThinkPHP3.2框架中实现
1.创建数据
DROP TABLE IF EXISTS `region`;
CREATE TABLE `region` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ''地区编号'',
`parentid` int(11) NOT NULL COMMENT ''上级id'',
`name` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT ''名称'',
PRIMARY KEY (`id`),
KEY `district_upid_index` (`parentid`),
KEY `district_name_index` (`name`)
) ENGINE=MyISAM AUTO_INCREMENT=91154 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;2.在view文件夹创建静态页面index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>省市区三级联动</title>
<style>
select{
width: 150px;
}
</style>
</head>
<body>
<!--省-->
<select name="provinceId" id="provinceId">
<option>请选择</option>
<volist name="provinceList" id="province">
<option value="{$province.id}">{$province.name}</option>
</volist>
</select>
<!--市-->
<select name="cityId" id="cityId">
<option>请选择</option>
</select>
<!--区-->
<select name="districtId" id="districtId">
<option>请选择</option>
</select>
</body>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
//省，市，区三级联动(显示市)
$("#provinceId").change(function(){
var provinceId=$(this).val();
$.ajax({
url:"{:U(''Demo/regionAjaxGetCitys'')}",
Type:"POST",
data:"provinceId="+provinceId,
dataType:"json",
success:function(data){
var city = data.city;
var option=$("<option></option>");
$(option).val("0");
$(option).html("请选择");
var option1=$("<option></option>");
$(option1).val("0");
$(option1).html("请选择");
$("#cityId").html(option);
$("#districtId").html(option1);
for(var i in city){
var option=$("<option></option>");
$(option).val(city[i][''id'']);
$(option).html(city[i][''name'']);
$("#cityId").append(option);
}
}
});
});
//省，市，区三级联动(显示地区)
$("#cityId").change(function(){
var cityId=$(this).val();
$.ajax({
url:"{:U(''Demo/regionAjaxGetdDistrict'')}",
Type:"POST",
data:"cityId="+cityId,
dataType:"json",
success:function(data){
var district = data.district;
var option=$("<option></option>");
$(option).val("0");
$(option).html("请选择");
$("#districtId").html(option);
for(var i in district){
var option=$("<option></option>");
$(option).val(district[i][''id'']);
$(option).html(district[i][''name'']);
$("#districtId").append(option);
}
}
});
});
</script>
</html>3.创建控制器DemoController.class.php
<?php
namespace Home\Controller;
class DemoController extends BaseController
{
/**
*查询
*/
public function getList($where){
$regionModel=D(''Region'');
$list = $regionModel->where($where)->select();
return $list;
}
/**
*获取省和直辖市
*/
public function index(){
$where[''parentid''] = 0;
$listprovince = $this->getList($where);
$this->assign("provinceList",$listprovince);
$this->display();
}
/**
*省市区三级联动ajax（获取市）
*/
public function regionAjaxGetCitys(){
$where[''parentid''] = I(''provinceId'');
$list = $this->getList($where);
$data=array(''city''=>$list);
header("Content-type: application/json");
exit(json_encode($data));
}
/**
*省市区三级联动ajax(获取地区)
*/
public function regionAjaxGetdDistrict(){
$where[''parentid''] = I(''cityId'');
$list = $this->getList($where);
$data=array(''district''=>$list);
header("Content-type: application/json");
exit(json_encode($data));
}
}
Ajax实现省市区三级联动
这篇文章主要为大家详细介绍了jQuery ajax实现省市县三级联动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能帮助到你
目录
需要的jar包：
数据库代码：
省：
市：
区：
页面展示代码：
DBHelper类：
总结
需要的jar包：
数据库代码：
create database school character set utf8; use school; CREATE table provice ( pid INT PRIMARY KEY auto_increment, pname varchar(20) ); INSERT into provice VALUES (null,"河南省"); INSERT into provice VALUES (null,"山东省"); INSERT into provice 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,"开封市",1); INSERT into city VALUES (null,"洛阳市",1); -- 山东 INSERT into city VALUES (null,"济南市",2); INSERT into city VALUES (null,"青岛市",2); INSERT into city VALUES (null,"淄博市",2); -- 河北 INSERT into city VALUES (null,"石家庄市",3); INSERT into city VALUES (null,"唐山市",3); INSERT into city VALUES (null,"秦皇岛市",3); CREATE table street ( sid INT PRIMARY KEY auto_increment, sname varchar(20), cid int ); -- 郑州市 INSERT into street VALUES (null,"中原区",1); INSERT into street VALUES (null,"二七区",1); INSERT into street VALUES (null,"管城回族区",1); -- 开封市 INSERT into street VALUES (null,"龙亭区",2); INSERT into street VALUES (null,"顺河回族区",2); INSERT into street VALUES (null,"鼓楼区",2); -- 洛阳市 INSERT into street VALUES (null,"汝阳",3); INSERT into street VALUES (null,"宜阳",3); INSERT into street VALUES (null,"洛宁",3); -- 济南市 INSERT into street VALUES (null,"商河县",4); INSERT into street VALUES (null,"济阳县",4); INSERT into street VALUES (null,"平阴县",4); -- 青岛市 INSERT into street VALUES (null,"七区五市",5); INSERT into street VALUES (null,"市南区",5); INSERT into street VALUES (null,"市北区",5); -- 淄博市 INSERT into street VALUES (null,"博山",6); INSERT into street VALUES (null,"周村",6); INSERT into street VALUES (null,"临淄",6); -- 石家庄市 INSERT into street VALUES (null,"正定县",7); INSERT into street VALUES (null,"行唐县",7); INSERT into street VALUES (null,"灵寿县",7); -- 唐山市 INSERT into street VALUES (null,"乐亭县",8); INSERT into street VALUES (null,"迁西县",8); INSERT into street VALUES (null,"玉田县",8); -- 秦皇岛市 INSERT into street VALUES (null,"青龙满族自治县",9); INSERT into street VALUES (null,"昌黎县",9); INSERT into street VALUES (null,"卢龙县",9);
省：
package cn.hp.dao; import cn.hp.model.Provice; import java.util.List; public interface ProviceInfoDao { public List findAll(); }
package cn.hp.impl; import cn.hp.dao.ProviceInfoDao; import cn.hp.model.Provice; import cn.hp.util.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 ProviceInfoDaoImpl implements ProviceInfoDao { @Override public List findAll() { Connection conn = DBHelper.getConn(); List list = new ArrayList(); String sql = "select * from provice"; try { PreparedStatement ps=conn.prepareStatement(sql); ResultSet rs = ps.executeQuery(); while (rs.next()){ Provice p = new Provice(); p.setPid(rs.getInt(1)); p.setPname(rs.getString(2)); list.add(p); } } catch (sqlException e) { e.printstacktrace(); } return list; } }
package cn.hp.model; public class Provice { private int pid; private String pname; public Provice() { } public Provice(int pid, String pname) { this.pid = pid; this.pname = pname; } @Override public String toString() { return "Provice{" + "pid=" + pid + ", pname='" + 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; } }
package cn.hp.servlet; import cn.hp.dao.ProviceInfoDao; import cn.hp.impl.ProviceInfoDaoImpl; import cn.hp.model.Provice; 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("/findprovice") public class FindProviceServlet extends HttpServlet { public FindProviceServlet() { super(); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException { // super.doGet(req, resp); req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); ProviceInfoDao pid = new ProviceInfoDaoImpl(); List plist=pid.findAll(); //把这个省份的集合转换成json格式的数据发送到前端页面 resp.getWriter().write(JSONObject.toJSONString(plist)); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException { super.doPost(req, resp); } }
市：
package cn.hp.dao; import cn.hp.model.City; import java.util.List; public interface CityInfoDao { public List findAllCity(int pid); }
package cn.hp.impl; import cn.hp.dao.CityInfoDao; import cn.hp.model.City; import cn.hp.model.Provice; import cn.hp.util.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 CityInfoDaoImpl implements CityInfoDao { @Override public List findAllCity(int pid) { Connection conn = DBHelper.getConn(); List list = new ArrayList(); 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; } }
package cn.hp.model; public class City { private int cid; private String cname; private int pid; public City() { } public City(int cid, String cname, int pid) { this.cid = cid; this.cname = cname; this.pid = pid; } @Override public String toString() { return "City{" + "cid=" + cid + ", cname='" + cname + ''' + ", pid=" + pid + '}'; } 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; } }
package cn.hp.servlet; import cn.hp.dao.CityInfoDao; import cn.hp.impl.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("/findcitypid") public class FindCityPidServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); String id = req.getParameter("id"); CityInfoDao cid = new CityInfoDaoImpl(); List list = cid.findAllCity(Integer.parseInt(id)); //把城市的集合转换成json格式的字符串发送到前端页面 resp.getWriter().write(JSONObject.toJSONString(list)); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException { super.doPost(req, resp); } }
区：
package cn.hp.dao; import cn.hp.model.Street; import java.util.List; public interface StreetInfoDao { public List findAllStreet(int cid); }
package cn.hp.impl; import cn.hp.dao.StreetInfoDao; import cn.hp.model.Provice; import cn.hp.model.Street; import cn.hp.util.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 StreetInfoDaoImpl implements StreetInfoDao { @Override public List findAllStreet(int cid) { Connection conn = DBHelper.getConn(); List list = new ArrayList(); String sql = "select * from Street where cid=?"; try { PreparedStatement ps=conn.prepareStatement(sql); ps.setInt(1,cid); ResultSet rs = ps.executeQuery(); while (rs.next()){ Street s = new Street(); s.setDid(rs.getInt(1)); s.setDname(rs.getString(2)); s.setCid(rs.getInt(3)); list.add(s); } } catch (sqlException e) { e.printstacktrace(); } return list; } }
package cn.hp.model; public class Street { private int did; private String dname; private int cid; public Street() { } public Street(int did, String dname, int cid) { this.did = did; this.dname = dname; this.cid = cid; } @Override public String toString() { return "Street{" + "did=" + did + ", dname='" + dname + ''' + ", cid=" + cid + '}'; } public int getDid() { return did; } public void setDid(int did) { this.did = did; } public String getDname() { return dname; } public void setDname(String dname) { this.dname = dname; } public int getCid() { return cid; } public void setCid(int cid) { this.cid = cid; } }
package cn.hp.servlet; import cn.hp.dao.CityInfoDao; import cn.hp.dao.ProviceInfoDao; import cn.hp.dao.StreetInfoDao; import cn.hp.impl.CityInfoDaoImpl; import cn.hp.impl.ProviceInfoDaoImpl; import cn.hp.impl.StreetInfoDaoImpl; import cn.hp.model.City; import cn.hp.model.Provice; import cn.hp.model.Street; 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("/findstreetdid") public class FindStreetServlet extends HttpServlet { public FindStreetServlet() { super(); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); String id = req.getParameter("id"); StreetInfoDao did = new StreetInfoDaoImpl(); List list=did.findAllStreet(Integer.parseInt(id)); //把这个省份的集合转换成json格式的数据发送到前端页面 resp.getWriter().write(JSONObject.toJSONString(list)); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException { super.doPost(req, resp); } }
页面展示代码：
Title请选择省 请选择市 请选择区
DBHelper类：
package cn.hp.util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.sqlException; public class DBHelper { private static String Driver = "com.MysqL.jdbc.Driver"; private static String Url = "jdbc:MysqL://localhost:3306/school?characterEncoding=utf8"; private static String user = "root"; private static String pwd = "root"; 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("链接成功"); } } }
总结
Ajax实现省市区三级联动实例代码
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" />
<style type=''text/css''>
.container{
padding-top: 150px;
}
</style>
</head>
<body>
<divcontainer''>
<div>
<div>
<select type="text"id="province">
<!-- <option>请选择省份</option> -->
</select>
</div>
<div>
<select type="text"id="city">
<option>请选择城市</option>
</select>
</div>
<div>
<select type="text"id="area">
<option>请选择县区</option>
</select>
</div>
</div>
</div>
<script src="./js/ajax.js"> </script>
<script src="./js/template-web.js"></script>
<!-- 省份模板 -->
<script type="text/html" id="provinceTpl">
<option>请选择省份</option>
{{each province}}
<!-- $value:循环过程中的当前项 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 市模板 -->
<script type="text/html" id="cityTpl">
<option>请选择城市</option>
{{each city}}
<!-- $value:循环过程中的当前项 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 县区模板 -->
<script type="text/html" id="areaTpl">
<option>请选择县区</option>
{{each area}}
<!-- $value:循环过程中的当前项 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<script>
//获取省市区下拉元素
var province=document.getElementById(''province'');
var city=document.getElementById(''city'');
var area=document.getElementById(''area'');
//1.获取省份信息
ajax({
type:''get'',
url:''http://localhost:3000/province'',
success:function(data){
// console.log(data);
//将服务器端返回的数据和html进行拼接
// 第一个参数为模板id,第二个参数为服务器返回的数据
var html = template(''provinceTpl'',{province:data});//province为上面的each对象，必须一致
// console.log(html);
//将拼接好的字符串html显示到页面中
province.innerHTML=html;
}
});
//为省份的下拉框添加值改变事件
province.onchange=function(){
//获取省份的id
var pid=this.value;
//清空县区下拉框中的数据
var html=template(''areaTpl'',{area:[]});
area.innerHTML=html;
//根据省份id获取城市信息
ajax({
type:''get'',
url:''http://localhost:3000/cities'',
data:{
id:pid
},
success:function(data){
// console.log(data);
var html = template(''cityTpl'',{city:data});
city.innerHTML=html;
}
}
);
}
//为市的下拉框添加值改变时事件
city.onchange=function(){
//获取城市id
var cid=this.value;
//根据城市id获取县区id
ajax({
type:''get'',
url:''http://localhost:3000/areas'',
data:{
id:cid
},
success:function(data){
var html=template(''areaTpl'',{area:data});
area.innerHTML=html;
}
});
}
</script>
</body>
</html>Ajax封装方法：
function ajax(options){
//定义默认
var defaults ={
type:''get'',
url:'''',
data:{},
Headers:{''Content-Type'': ''application/x-www-form-urlencoded''},
success:function(){},
error:function(){}
};
//用options中的对象覆盖defaults中对象
Object.assign(defaults,options);
//创建
var xhr= new XMLHttpRequest();
//拼接请求参数变量
var params='''';
//循环用户传递进来的对象格式参数
for(var attr in defaults.data){
//将参数转换成字符串格式
params+= attr +''=''+ defaults.data[attr] +''&'';
}
//字符串截取，将最后的&截取掉
params= params.substr(0,params.length -1);
//判断请求方式
if(defaults.type==''get''){
defaults.url=defaults.url +''?''+ params;
}
//配置
xhr.open(defaults.type,defaults.url);
//发送请求
if(defaults.type==''post''){
//用户期望的向服务端传递的请求参数类型
var contentType=defaults.Headers[''Content-Type''];
//post请求时必须设置的
xhr.setRequestHeader(''Content-Type'',contentType);
//判断请求参数类型
if(contentType==''application/json''){
xhr.send(JSON.stringify(defaults.data));
}else{
xhr.send(JSON.stringify(params));
}
}else{
xhr.send();
}
//监听onload事件,当接收完响应数据后触发
xhr.onload=function(){
//xhr.getResponseHeader()
//获取响应头部数据
var contentType=xhr.getResponseHeader(''Content-Type'');
//服务端返回的数据
var responseText=xhr.responseText;
if(contentType.includes(''application/json'')){
//把JSON字符串转换为JSON 对象
responseText = JSON.parse(responseText);
}
//对http状态码判断，判断是否等于200
if(xhr.status==200){
//调用处理成功情况的函数
defaults.success(responseText,xhr);
}else{
//调用处理失败的情况函数
defaults.error(responseText,xhr);
}
}
}服务器端测试代码：
/**** server.js ****/
// 一个简单的后端路由
//1.引入express框架
const express=require(''express'');
const fs=require(''fs'');
//2.引入路径处理模块
const path=require(''path'');
const bodyParser=require(''body-parser'');//post
//3.创建web服务器
const app=express();
//post
//extended:返回的对象是一个键值对，当extended为false的时候，键值对中的值就为''String''或''Array''形式，为true的时候，则可为任何数据类型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());
//4.静态资源访问服务器功能
app.use(express.static(path.join(__dirname,''public'')));
//5.配置路由 request 请求 response 响应,回应
//get路由 ，对应 province
app.get(''/province'',(request,response)=>{
//响应
var data= new Array({id:1,name:"黑龙江省"},{id:2,name:"四川省"},{id:3,name:"河北省"},{id:4,name:"安徽省"});
response.send(data)
});
//get路由 ，对应 cities
app.get(''/cities'',(request,response)=>{
//响应
const id = request.query.id;
var data= new Array();
if (id == 1) {
data =new Array({id:101,name:"哈尔滨市"},{id:102,name:"齐齐哈尔市"},{id:103,name:"牡丹江市"},{id:104,name:"佳木斯市"},{id:105,name:"其他市"});
response.send(data)
} else if(id == 2) {
data =new Array({id:201,name:"成都市"},{id:202,name:"绵阳市"},{id:203,name:"德阳市"},{id:204,name:"攀枝花市"},{id:205,name:"其他市"});
response.send(data)
}
else if(id == 3) {
data =new Array({id:301,name:"河北市"},{id:302,name:"石家庄市"},{id:303,name:"唐山市"},{id:304,name:"保定市"},{id:305,name:"其他市"});
response.send(data)
}
else if(id == 4) {
data =new Array({id:401,name:"合肥市"},{id:402,name:"滁州市"},{id:403,name:"宿州市"},{id:404,name:"阜阳市"},{id:405,name:"其他市"});
response.send(data)
}
});
//get路由 ，对应 areas
app.get(''/areas'',(request,response)=>{
//响应
const id = request.query.id;
var data= new Array();
if (id == 101) {
data =new Array({id:1011,name:"依兰县"},{id:1012,name:"方正县"},{id:1013,name:"宾县"},{id:1014,name:"木兰县"},{id:1015,name:"其他县"});
response.send(data)
} else if(id == 102) {
data =new Array({id:1021,name:"龙江县"},{id:1022,name:"依安县"},{id:1023,name:"泰来县"},{id:1024,name:"拜泉县"},{id:1025,name:"其他县"});
response.send(data)
}
else if(id == 103) {
data =new Array({id:1031,name:"林口县"},{id:1032,name:"其他县"});
response.send(data)
}
else if(id == 104) {
data =new Array({id:1041,name:"桦南县"},{id:1042,name:"桦川县"},{id:1043,name:"其他县"});
response.send(data)
} else if(id == 105) {
data =new Array({id:1051,name:"其他县"});
response.send(data)
}
// 其他城市的就不写进行测试了，实际项目中还维护到数据库中，然后从数据库查询带出
});
//6.监听端口,进行回调
app.listen(3000,(err)=>{
// 函数体
if(!err) {
console.log(''测试ajax请求的服务器开启成功了!'');
console.log(''正在监听3000端口...........'');
}
});到此这篇关于Ajax实现省市区三级联动的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持。
- Ajax实现省市区三级联动
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
- jquery+ajax实现省市区三级联动(封装和不封装两种方式)
- jquery+ajax实现省市区三级联动效果简单示例
- AJAX省市区三级联动下拉菜单(java版)
- PHP+Mysql+Ajax+JS实现省市区三级联动
ajax省市区三级联动
area.html
<!DOCTYPEHTML>
<html>
<head>
<title>ajax</title>
<Metacharset="utf-8"/>
<scripttype="text/javascript">
varhttpAjax=newXMLHttpRequest();
function$(id){
returndocument.getElementById(id);
}
//获取省
functiongetProvince(){
httpAjax.onreadystatechange=function(){
if(httpAjax.readyState==4&&httpAjax.status==200){
varres=httpAjax.responseText;
res=eval("("+res+")");
var_html="<optionvalue=\"\">请选择...</option>";
for(variinres){
_html+="<optionvalue='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
}
$("province").innerHTML=_html;
}
}
httpAjax.open("post","area.PHP",false);
httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
httpAjax.send("");
}
//加载完毕设置选择省
window.onload=function(){
getProvince();
}
//获取市
functiongetCity(pid){
if(pid==""){
alert(1);
$("city").innerHTML="<optionvalue=\"\">请选择...</option>";
$("county").innerHTML="<optionvalue=\"\">请选择...</option>";
returnfalse;
}
$("county").innerHTML="<optionvalue=\"\">请选择...</option>";
httpAjax.onreadystatechange=function(){
if(httpAjax.readyState==4&&httpAjax.status==200){
varres=httpAjax.responseText;
res=eval("("+res+")");
var_html="<optionvalue=\"\">请选择...</option>";
for(variinres){
_html+="<optionvalue='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
}
$("city").innerHTML=_html;
}
}
httpAjax.open("post","application/x-www-form-urlencoded");
vardata="id="+pid;
httpAjax.send(data);
}
//获取区县市
functiongetCounty(cid){
if(cid==""){
$("county").innerHTML="<optionvalue=\"\">请选择...</option>";
returnfalse;
}
httpAjax.onreadystatechange=function(){
if(httpAjax.readyState==4&&httpAjax.status==200){
varres=httpAjax.responseText;
res=eval("("+res+")");
var_html="<optionvalue=\"\">请选择...</option>";
for(variinres){
_html+="<optionvalue='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
}
$("county").innerHTML=_html;
}
}
httpAjax.open("post","application/x-www-form-urlencoded");
vardata="id="+cid;
httpAjax.send(data);
}
</script>
</head>
<body>
<selectid="province"onchange="getCity(this.value)">
<optionvalue="">请选择...</option>
</select>省
<selectid="city"onchange="getCounty(this.value)">
<optionvalue="">请选择...</option>
</select>市
<selectid="county">
<optionvalue="">请选择...</option>
</select>县/市/区
</body>
</html>
area.PHP
<?PHP
$pdo=newPDO("MysqL:host=localhost;dbname=tk106","root","admin");
$pdo->exec("setnamesutf8");
$id=isset($_REQUEST['id'])?$_REQUEST['id']:"0";
$sql="select*fromareawhereparentid=".$id;
$data=$pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
echojson_encode($data);
?>今天关于js省市区三级联动代码和js省市区三级联动代码源代码的分享就到这里，希望大家有所收获，若想了解更多关于Ajax-省市区三级联动、Ajax实现省市区三级联动、Ajax实现省市区三级联动实例代码、ajax省市区三级联动等相关知识，可以在本站进行查询。
本文标签：
