Ajax+mybaits实现省市区三级联动

最新推荐文章于 2022-11-23 14:30:19 发布
最新推荐文章于 2022-11-23 14:30:19 发布
阅读量2.9k 收藏 11
点赞数 5
分类专栏： 【JAVAEE】 文章标签： 省市区三级联动 ajax 联动查询 js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a447332241/article/details/77317951
版权

1.先看一下效果图

 


1.我们先来看一下数据库

proinves  city  county 分别代表省，市，区的三张表

proinves的表



City表



County表



3.对应的service层


@Service
public class TestService {

	@Autowired
	ProvinceMapper provinceMapper;
	
	@Autowired
	CityMapper cityMapper;
	
	@Autowired
	CountyMapper countyMapper;
	
   /**
    * 获取所有省的信息
    * @return
    */
	public Msg getProvinces(){
		ProvinceExample example = new ProvinceExample();
		List<Province> list = provinceMapper.selectByExample(example);
		return Msg.success().add("list", list);
		
	}
	
	/**
	 * 根据省份id获取市的信息
	 * @param provinceId
	 * @return
	 */
	public Msg getCityByProvinces(Long provinceId){
		CityExample example = new CityExample();
		Criteria criteria = example.createCriteria();
		criteria.andProvinceidEqualTo(provinceId);
		List<City> list = cityMapper.selectByExample(example);
		return Msg.success().add("list", list);
	}
	
	
	/**
	 * 根据市的id获取区的信息
	 * @param CityId
	 * @return
	 */
	public Msg getCountyByCityId(Long CityId){
	   CountyExample example = new CountyExample();
	   com.atguigu.crud.bean.CountyExample.Criteria criteria = example.createCriteria();
	   criteria.andCityidEqualTo(CityId);
	   List<County> list = countyMapper.selectByExample(example);
	   return Msg.success().add("list", list);
	 		
	}
	
}

4.Controller层.   

@Controller
public class TestController {
	
	@Autowired
	TestService testService;
	
	@RequestMapping("/getProvinces")
	@ResponseBody
	public Msg getProvinces(){
		
		return testService.getProvinces();
		
	}
	
	
	@RequestMapping("/getCityByProvinceId")
	@ResponseBody
	public Msg getCityBuProvinces(Long provinceId){
		return testService.getCityByProvinces(provinceId);
		
	}
	
	
	@RequestMapping("/getCountyByCityId")
	@ResponseBody
	public Msg getCountyByCityId(Long CityId){
		return testService.getCountyByCityId(CityId);
		
	}
	

}

5.前台代码 

HTML

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<link rel="stylesheet"
	href="${APP_PATH}/static/bootstrap/css/bootstrap.css">
<script type="text/javascript"
	src="${APP_PATH}/static/js/jquery-2.0.0.min.js"></script>
</head>
<body>

	<div class="form-group">
		<label class="col-sm-2 control-label">Province</label>
		<div class="col-sm-2">
			<select class="form-control" name="dId" id="Province_add_select"
				οnchange="selectCitys(this)">
			</select>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">City</label>
		<!-- 部门提交部门id即可 -->
		<div class="col-sm-2">
			<select class="form-control" name="dId" id="City_add_select"
				οnchange="selectCountys(this)">
			</select>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">County</label>
		<div class="col-sm-2">
			<select class="form-control" name="dId" id="County_add_select">
			</select>
		</div>
	</div>

	<script type="text/javascript">
		//页面加载时获取省的信息
		$(function() {
			getProvinces();
		});

		function getProvinces(ele) {

			$.getJSON("${APP_PATH}/getProvinces", function(data) {
				$.each(data.extend.list, function() {
					var opt = $("<option></option>").append(this.provincename)
							.attr("provinceid", this.provinceid);
					opt.appendTo("#Province_add_select");
				})
			});
		}

		//下拉框改变时获取相应市的信息	 		 			 	
		function selectCitys(ele) {

			var provinceid = $("#Province_add_select").find("option:selected")
					.attr("provinceid");

			$.get("${APP_PATH}/getCityByProvinceId", {
				provinceId : provinceid
			}, function(data) {
				$("#City_add_select").empty();
				$.each(data.extend.list, function() {
					var opt = $("<option></option>").append(this.cityname)
							.attr("cityId", this.cityid);
					opt.appendTo("#City_add_select");
				})

			})

		}

		//下拉框改变时获取相应区的信息
		function selectCountys(ele) {
			var Cityid = $("#City_add_select").find("option:selected").attr(
					"cityId");
			$.get("${APP_PATH}/getCountyByCityId", {
				CityId : Cityid
			}, function(data) {
				$("#County_add_select").empty();
				$.each(data.extend.list, function() {
					var opt = $("<option></option>").append(this.countyname);
					opt.appendTo("#County_add_select");
				})

			})

		}

		/*  var e = ele.options[ele.selectedIndex].attr("provinceid");
		 alert(e); 	   */
	</script>


	<script type="text/javascript"
		src="${APP_PATH}/static/bootstrap/js/bootstrap.js"></script>
</body>
</html>


总结：以后相应的联动查询均可以用这种方式



Asher1
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Ajax 三级联动省市县
qq7027的博客
03-05 598
Ajax 三级联动省市县
ajax 实现 省市区 三级联动
m0_57550795的博客
01-02 580
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>省市区三级联动</title> <style type="text/css"> select{ width: 200px; } </style> <scrip.
省份三级联动+模糊查询+省份单表增删改查
qq_63064991的博客
11-23 540
关于省级三级联动还有单表省份的增删改查还写了个关于三级联动模糊查询
ajax实现省市区三级联动
qq_15901351的博客
07-17 7177
案例：从数据库获取数据实现省市区三级联动，如下图所示 思路：网页初始化时，先获取所有的省份，通过被选中的省份id去获取所有城市，在通过被选中的城市id去加载所有的区县， 当所选的省市的id发生改变时，触发change事件，去加载相应的省市区。 代码如下： html:                                  &lt;div class="input-group...
Ajax实现省市区三级联动（JavaWeb）
不是七七子的博客
04-12 1565
先看下效果图： 项目结构： 1.准备数据库 表结构： 我把数据库、jquery和项目所用的jar包上传到了百度云盘，如果有需要可以下载。 链接：https://pan.baidu.com/s/1VijPG7LPeJoOHCa2mZsrww 提取码：fz86 先分析下数据库里面的数据，分析省份、城市、地区之间的联系。 分析ajax执行过程： ajax向服务器发送请求，Servlet接收ajax发来的请求，获取ajax传递的数据。服务器内部调用dao类，获取数据库中的数据，此时数据是Java对象或J
初识Ajax
买米当卡的博客
03-04 621
初识Ajax 一、同步交互和异步交互 举个例子：普通B/S模式(同步) AJAX技术(异步) 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕 同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。 异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式 易懂的理解: 异步传输：你传输吧，我去做我的事了，传
使用AJax和JavaScript实现省市区三级联动
住在城北的猫
02-27 1707
Ajax实现省市区 三级联动浅谈Ajax Ajax（Asynchronous JavaScript and XML）异步的javaScript和xml，即可以在整个页面不刷新的情况下，实现局部页面的刷新，主要要的例子有：新浪微博，当然也可以实现三级联动的效果，这正是本博客要着重介绍的内容。 原理图解： 效果图： 实现步骤： 编写三级联动页面
springboot+security+jwt+mybaits-plus+mysql实现权限管理
03-13
3. JWT：JWT是一种轻量级的身份验证机制，用于在不同域之间传递信息。在Spring Security中，JWT被用来替代传统的session存储用户认证信息。每次用户成功登录后，服务器会生成一个包含用户信息的JWT，然后发送给...
基于easyui的文档管理系统springmvc+mybaits实现
06-11
基于easyui的文档管理系统springmvc+mybaits实现，有详细的设计过程以及数据库设计文档等，并且可以直接运行使用，具体可以查看介绍https://my.oschina.net/u/3500033/blog/1828156
基于spring+springMVC+mybaits 实现的会员管理系统
最新发布
04-23
总的来说，基于Spring+SpringMVC+MyBatis的会员管理系统充分利用了这三个框架的优势，实现了高效、灵活和易于维护的开发模式。它们的结合为开发人员提供了丰富的工具集，能够快速构建出稳定且功能齐全的Web应用。...
AJAX实现省市区三级联动
12-28
使用AJAX从数据库中读取省、市、地区的数据，添加到select的option选项，实现自动筛选。
java+ajax省市区三级联动实例
03-30
java+ajax省市区三级联动实例。。。。。。。。。。。。。。。。
简单实用的ssm+json三级联动
01-12
简单实用的ssm+json三级联动。一看就懂
ajax省市区三级联动代码
12-16
使用ajax + servlet + jdbc做的省市区三级联动，内含sql文件。对应有博客介绍，欢迎访问http://blog.csdn.net/qq_19558705/article/details/50318981
Ajax+jQuery实现省市区三级联动功能
01-05
实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。
springboot+mybaits+html+mysql简单demo
11-08
下面将详细解析这个“springboot+mybaits+html+mysql简单demo”。 1. **SpringBoot核心概念** - **自动配置**：SpringBoot通过`@EnableAutoConfiguration`注解，根据项目中的依赖自动配置相应的bean。 - **嵌入式...
基于Spring+SpringMVC+Mybaits的小区停车场车牌识别系统.zip
10-20
基于Spring+SpringMVC+Mybaits的小区停车场车牌识别系统 基于Spring+SpringMVC+Mybaits的小区停车场车牌识别系统 基于Spring+SpringMVC+Mybaits的小区停车场车牌识别系统 基于Spring+SpringMVC+Mybaits的小区停车场...
Idea：java使用ajax+SpringMVC+Mybatis实现省市县三联动
programmer-dll
05-07 299
最近在学习SSM框架的时候，觉得有必要对select下拉框进行动态加载一下，然后不知道怎么回事，就想出来使用ajax进行动态加载，进而就触及到了使用JSONObject对数据的序列化处理 java的这个三联动主要是为了展示ajax的异步刷新与对jsp页面的渲染 在java中使用JSONObject这个类，来序列化结果 数据库中的表： 结构目录： 1.Entity Province pub...
Ajax基础：省市区三级联动（Ajax+template-web）
昔冰_G的博客
09-21 435
省市区三级联动注意事项： 1、【市】要根据【省】的变化而变化，【区】要根据【市】的变化而变化 2、select-option的下拉框，借助onchange事件，当改变选中内容时触发 3、当选完省市区后，如果重新更改【省】，【市】应重新赋值，【区】应该清空 不然就会造成残留的【市】【区】，不匹配【省】信息的数据同框出现的尴尬！ 客户端 14ajax.html 代码： （结构部分--省去了option选项，是因为option要用在模板中） <div id="container">..
springboot +mybaits 实现分页查询
05-28
Spring Boot是一个快速开发框架，MyBatis是一款优秀的ORM框架，结合两者可以轻松实现分页查询。下面是一个简单的Java代码示例，用于实现分页查询： 1. 首先，在pom.xml文件中添加MyBatis和PageHelper的依赖： ```xml <!-- MyBatis依赖 --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.4</version> </dependency> <!-- PageHelper依赖 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.13</version> </dependency> ``` 2. 在application.yml文件中配置MyBatis和PageHelper： ```yml mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true pagehelper: helper-dialect: mysql reasonable: true support-methods-arguments: true params: count=countSql ``` 3. 在DAO层定义分页查询接口： ```java public interface UserDao { List<User> findUsersByPage(int pageNum, int pageSize); } ``` 4. 在Mapper XML文件中定义SQL语句： ```xml <select id="findUsersByPage" resultType="User"> select * from user </select> ``` 5. 在Service层实现分页查询方法： ```java @Service public class UserService { @Autowired private UserDao userDao; public PageInfo<User> findUsersByPage(int pageNum, int pageSize) { PageHelper.startPage(pageNum, pageSize); List<User> userList = userDao.findUsersByPage(pageNum, pageSize); return new PageInfo<>(userList); } } ``` 6. 在Controller层调用Service方法： ```java @RestController public class UserController { @Autowired private UserService userService; @GetMapping("/users") public PageInfo<User> getUsers(@RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize) { return userService.findUsersByPage(pageNum, pageSize); } } ``` 以上代码使用了PageHelper进行分页操作，最终将分页信息封装在了PageInfo对象中返回给调用者。你可以根据自己的实际情况进行修改和优化。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值