前端（HTML）——Ajax实现省、市、县联动

1.什么是ajax?

2.ajax有什么优点：

3.实现省市联动需要准备什么数据？

1.提前准备数据库数据

2.引入jquery库、fastjson包

3.前端代码：

后端代码：

结果展示：

1.什么是ajax?

AJAX可以在浏览器中发送异步请求，请求A和B是异步的，谁也不需要等谁，类似于多线程并发 。

2.ajax有什么优点：

因为传统的请求访问页面会进行跳转，将原来页面给清除，跳转到一个新的页面。这样用户体验极差，ajax则可以局部刷新，不影响其他请求。

3.实现省市联动需要准备什么数据？

1.提前准备数据库数据

解释说明：数据库主要有code,name,pcode三个字段，其中code为根节点，pcode指向父节点（code）,若pcode的值为null则说明对应的name为根值（也就是省份），若pcode不为空则对应的name为省下面的市或者市下面的区/县。

2.引入jquery库、fastjson包

ajax被封装在jQuery库里，所以完成功能需要引入对应的库，这里直接附上官网：jQuery

fastjson官网包： Maven Central Repository Search

3.前端代码：

核心代码：

//刷新省份信息$.ajax({type:"get",url:"/ajax/listArea",data:"t=" + new Date().getTime(),async:true,success : function(jsonArr){//将接收的jsonArr字符串转化为json格式数据//jsonArr:[{"code":"001","name":"河南省"},{"code":"002","name":"河北省"},{"code":"007","name":"江苏省"}]var jss=eval(jsonArr)var html="<option value=''>--请选择省份--</option>";for(var i =0;i<jss.length;i++){var area =jss[i]//console.log(jsonArr[i])html +="<option value='"+area.code+"'>"+area.name+"</option>"}$("#province").html(html)}})

 //更新市信息  这里要注意往后端传输pcode数据
$("#province").change(function (){$.ajax({type:"get",url:"/ajax/listArea",data:"t=" + new Date().getTime()+ "&pcode="+this.value,//传送数据async:true,success : function(jsonArr){//将接收的jsonArr字符串转化为json格式数据//jsonArr:[{"code":"001","name":"河南省"},{"code":"002","name":"河北省"},{"code":"007","name":"江苏省"}]var jss=eval(jsonArr)var html="<option value=''>--请选择市--</option>";for(var i =0;i<jss.length;i++){var area =jss[i]//console.log(jsonArr[i])html +="<option value='"+area.code+"'>"+area.name+"</option>"}$("#city").html(html)}})})

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>省市联动</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>//引入jQuery库
<script type="text/javascript">$(function (){//发送ajax请求 页面已经加载刷新省信息$.ajax({type:"get",url:"/ajax/listArea",data:"t=" + new Date().getTime(),async:true,success : function(jsonArr){//将接收的jsonArr字符串转化为json格式数据//jsonArr:[{"code":"001","name":"河南省"},{"code":"002","name":"河北省"},{"code":"007","name":"江苏省"}]var jss=eval(jsonArr)var html="<option value=''>--请选择省份--</option>";for(var i =0;i<jss.length;i++){var area =jss[i]//console.log(jsonArr[i])html +="<option value='"+area.code+"'>"+area.name+"</option>"}$("#province").html(html)}})//ajax请求，change事件  当点击省份的时候刷新对应市信息$("#province").change(function (){$.ajax({type:"get",url:"/ajax/listArea",data:"t=" + new Date().getTime()+ "&pcode="+this.value,async:true,success : function(jsonArr){//将接收的jsonArr字符串转化为json格式数据//jsonArr:[{"code":"001","name":"河南省"},{"code":"002","name":"河北省"},{"code":"007","name":"江苏省"}]var jss=eval(jsonArr)var html="<option value=''>--请选择市--</option>";for(var i =0;i<jss.length;i++){var area =jss[i]//console.log(jsonArr[i])html +="<option value='"+area.code+"'>"+area.name+"</option>"}$("#city").html(html)}})})//ajax请求，change事件  当点击省份的时候刷新对应市信息$("#city").change(function (){$.ajax({type:"get",url:"/ajax/listArea",data:"t=" + new Date().getTime()+ "&pcode="+this.value,async:true,success : function(jsonArr){//将接收的jsonArr字符串转化为json格式数据//jsonArr:[{"code":"001","name":"河南省"},{"code":"002","name":"河北省"},{"code":"007","name":"江苏省"}]var jss=eval(jsonArr)var html="<option value=''>--请选择区/县--</option>";for(var i =0;i<jss.length;i++){var area =jss[i]//console.log(jsonArr[i])html +="<option value='"+area.code+"'>"+area.name+"</option>"}$("#area").html(html)}})})})</script>
<select id="province"></select>
<select id="city"></select>
<select id="area"></select>
</body>
</html>

后端代码：

package servlet;import com.alibaba.fastjson.JSON;
import pojb.Area;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.sql.*;
import java.util.ArrayList;
import java.util.List;@WebServlet("/listArea")
public class AreaListServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取pcode数据String pcode=request.getParameter("pcode");//连接数据库验证用户是否存在Connection conn = null;PreparedStatement ps = null;ResultSet rs = null;List<Area> areaList=new ArrayList<>();try {//1.注册驱动Class.forName("com.mysql.jdbc.Driver");//2.获取连接conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "123456");//3.获取预编译对象String sql="";if(pcode==null){//如果pcode为null则查询省份信息sql="select code,name from t_area where pcode is null";ps=conn.prepareStatement(sql);}else {//查询市或者区信息sql="select code,name from t_area where pcode = ?";ps=conn.prepareStatement(sql);ps.setString(1,pcode);}//4.执行SQL语句rs = ps.executeQuery();//5/处理结果集while(rs.next()){String code=rs.getString("code");String name=rs.getString("name");Area area=new Area(code,name);areaList.add(area);}} catch (Exception e) {e.printStackTrace();} finally {if (rs != null) {try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if (ps != null) {try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if (conn != null) {try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}response.setContentType("text/html;charset=UTF-8");String json= JSON.toJSONString(areaList);//这里将查询到的信息转化为json字符串response.getWriter().print(json);//将json字符串响应到前端浏览器}
}

结果展示：

前端（HTML）——Ajax实现省、市、县联动相关推荐

省市县三级联动
大纲一.导入省市县数据表(t_region) 二.引入jar包三.导入所需util类(整体框架) 四.编写代码 1.配置数据库相关信息(数据库名.用户名.密码) config.propr ...
iOS增强版的UIDatePicker，省市县三级联动地址选择器（ActionSheetCustomPicker）
一般的项目中都会有一个选择地址的需求,系统的UIDatePicker肯定是不够的,找了个比较好用的库 ActionSheetCustomPicker github地址:ActionSheetCusto ...
【web前端性能优化】13.城市三级联动
最近做项目遇到一个城市三级联动的前端问题,感觉一个城市三级联动如果引入一个jquery库,有点太重了,于是就在网上找到了原始的js写法,感觉还挺好用的就记录一下,如下图所示: pay.html < ...
jQuery实现后台异步加载数据的省、市二级联动
实现省.市的二级联动,网上的案例大都是死数据,不好和后台交互,于是自己动手写了一个,前台jsp+jquery,后台是spring mvc的controller,用异步来加载数据.废话不多说,上代码!( ...
Ajax实现无刷新三联动下拉框
1.html代码 <HTML> <HEAD> <title>Ajax实现无刷新三联动下拉框</title> &l ...
mysql省市县三级互动_mysql+ajax的省市县三级联动
1.[代码][PHP]代码在发一次包括数据库在内的代码以示感谢!!! php页面: //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式 header("Content-Type ...
web前端必学功法之一：省市联动
web前端必学功法之一:省市联动案例:js实现下面功能 **<!-- 省市联动思路分析:1.准备元素:定义省份与城市的下拉框2.绑定事件:绑定省份下拉框的change事件3.准备数据:准备数组 ...
ajax 取值返回map_springboot|前端发ajax请求到后台Controller及常见的坑
前端发ajax请求这块是web的基础,发web请求大概需要以下几步1.引用web相关的依赖2.前端页面引入jquery.js3.编写ajax请求4.编写对应的Controller 引入web相关的依 ...
国家统计局2020年6月30日最新省/市/县三级json数据（不包含港澳台）
目录国家统计局2020年最新省/市/县json数据(不包含港澳台) 全部数据数据说明获取省级数据获取市级数据获取县级数据国家统计局2020年最新省/市/县json数据(不包含港澳台) 国家 ...
分省/市/县最低工资标准（2012-2021年）和全国/省/市/县GDP数据（1949-2020年）
一.最低工资数据 1.数据来源:各省\市\县政府公布资料 2.时间跨度:2012-2021年 3.区域范围:全国各省\市\县 4.指标说明: 部分数据如下: 二.各省市县人均GDP 1.数据来源:地 ...

前端（HTML）——Ajax实现省、市、县联动

1.什么是ajax?

2.ajax有什么优点：

3.实现省市联动需要准备什么数据？

1.提前准备数据库数据

2.引入jquery库、fastjson包

3.前端代码：

后端代码：

结果展示：

前端（HTML）——Ajax实现省、市、县联动相关推荐

最新文章

热门文章