说明;
利用Ajax实现省市联动的过程很简单，只需要发送两次ajax请求，第一次自动ajax请求，向数据库中读取所有省份的数据，第二次是在省份发生改变的时候发送第二次Ajax请求，向数据库中读取所有的市级地区，将对应的地区显示在选择标签中。

省市联动总结目录

1. 省市联动含义？
2. 建立数据库表
3. 功能实现

1. 省市联动含义？

在网页上，选择对应的省份之后，动态的关联出该省份对应的市。选择对应的市之后，动态的关联出该市对应的区。

2. 建立数据库表

t_area （区域表）
id(PK-自增)     code      name        pcode
---------------------------------------------
1               001      河北省        null
2               002      河南省        null
3               003      石家庄        001
4               004      邯郸          001
5               005      郑州          002
6               006      洛阳          002
7               007      丛台区        004  将全国所有的省、市、区、县等信息都存储到一张表当中。
采用的存储方式实际上是code pcode形势。

将数据存放到数据库

3. 功能实现

创建一个页面：两个select标签
创建一个JavaBean：用来存放从数据库中读取的数据，添加到List集合中，方便使用阿里的JSON转换格式
创建一个Java程序：LianDongServlet
- 代码实现
- 这里发送Ajax使用的是jQuery库封装好的代码

前端页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>实现省市联动</title>
</head>
<body><script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script><script type="text/javascript">$(function () {$.ajax({type: "GET",url: "/ajax/listarea",data: "t="+new Date().getTime(),async: true,success: function (json) {var html = "<option value=''>--请选择--</option>"for (var i = 0; i < json.length; i++) {var area = json[i];var pname = area.name;var code = area.code;html += "<option value='"+code+"'>"+pname+"</option>"}$("#province").html(html)}})$("#province").change(function (){// alert(this.value)//发送Ajax请求$.ajax({type: "GET",url: "/ajax/listarea",data: "pcode="+this.value,async: true,success: function (json) {var html = "<option value=''>--请选择--</option>"for (var i = 0; i < json.length; i++) {var area = json[i];var pname = area.name;var code = area.code;html += "<option value='"+code+"'>"+pname+"</option>"}$("#city").html(html)}})})})</script><h1 align="center">实现省市联动</h1><select id="province"></select><select id="city"></select>
</body>
</html>

Servlet程序

@WebServlet("/listarea")
public class LianDongServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.getParameter("UTF-8");response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();String pcode = request.getParameter("pcode");Connection conn = null;PreparedStatement ps = null;ResultSet rs = null;List<Area> areaList = new ArrayList<>();try {conn = DBUtil.getConnection();String sql = "";if (pcode == null){sql = "select * from t_area where pcode is NULL";ps = conn.prepareStatement(sql);}else {sql = "select * from  t_area where pcode = ?";ps = conn.prepareStatement(sql);ps.setString(1,pcode);}rs = ps.executeQuery();while (rs.next()){String name = rs.getString("name");String code = rs.getString("code");Area area = new Area(code, name);areaList.add(area);}} catch (SQLException e) {e.printStackTrace();}finally {DBUtil.close( conn,ps,rs);}String jsonString = JSON.toJSONString(areaList);out.print(jsonString);}
}

JavaBean

package com.lcl.ajax.bean;import java.util.Objects;/*** @Author Administration* @PackageName NewWeb* @Package com.lcl.ajax.bean* @Date 2022/8/19 17:32* @Description:*/
public class Area {private String code;private String name;public Area() {}public Area(String code, String name) {this.code = code;this.name = name;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getName() {return name;}public void setName(String name) {this.name = name;}@Overridepublic String toString() {return "Area{" +"code=" + code +", name='" + name + '\'' +'}';}@Overridepublic boolean equals(Object o) {if (this == o) return true;if (o == null || getClass() != o.getClass()) return false;Area area = (Area) o;return code == area.code && Objects.equals(name, area.name);}@Overridepublic int hashCode() {return Objects.hash(code, name);}
}

Ajax——AJAX实现省市联动相关推荐

用map和ajax省市联动,jquery，ajax实现二级省市联动
后台代码: package com.weixin.servlet; import java.io.IOException; import java.io.PrintWriter; import jav ...
使用Ajax实现省市联动Bootstrap的基本使用
上节课我们已经讲了Ajax了,现在我们来使用Ajax来实现省市联动以及bootstrap的一些基本使用目录一.案例(使用Ajax实现省市联动) 二.Bootstrap的基本介绍三.bootstr ...
ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("" + "--请选择--" + ...
ajax省市联动案例,AJAX案例四：省市联动(示例代码)
1 2 3 4 5 6 7 8 My JSP \'ajax5.jsp\' starting page 9 10 11 12 13 14 15 18 19 functioncreateXMLHttpRe ...
addoption php,无忧建站-ajax+php无刷新二级联动下拉菜单(省市联动)源码
/** * ajax无刷新二级联动下拉菜单(省市联动) * * @author arcow * @version 1.0 * @lastupdate 2005-12-29 * */ ...
JavaWeb之Ajax,省市联动及无刷新数据分页
目录一,Ajax的作用二,$.ajax() 1.jQuery.ajax(url,[settings]) 2.$.ajax() 三,post 1.通过远程 HTTP POST 请求载入信息 2.jQ ...
ajax和php二级联动,jQuery+php+mysql,轻松实现ajax无刷新省市二级联动[多图]
jQuery+php+mysql,轻松实现ajax无刷新省市二级联动[多图] 08-15栏目:技术 TAG:zxfy zxfy 用jQuery的ajax方法,结合PHP,轻松实现省市级的二级联动: h ...
JavaWeb开发之Ajax省市联动无刷新分页
我们在上一节课已经和大家讲解过Ajax的使用,大家可以去看下该篇文章,今天也主要是一个拓展延伸,使用Ajax去完成无刷新省市联动和无刷新分页. 案列:使用Ajax完成无刷新分页数据库数据 crea ...
jQuery下的ajax之省市区三级联动
jQuery下的ajax之省市区三级联动小编提醒一下别忘了引入jQuery文件哟 HTML 所在省份:<select name="province"><opti ...
省市联动与Bootstrap的基本使用
最后面有数据库的数据(因为数据太多,以免大家手太累哈) 项目目录一.省市联动我们现在来看一下是怎么查询数据的查询湖南省 select * from bs_region where name='湖 ...

Ajax——AJAX实现省市联动

省市联动总结目录

1. 省市联动含义？

2. 建立数据库表

3. 功能实现

Ajax——AJAX实现省市联动相关推荐

最新文章

热门文章