标签：function showCity obj SpringBoot country pid AJAX 联动 var
在某宝和某东确定订单的时候，收货地址填写会实时更新。多的不说上代码。
效果图:
1.表结构和思路解析
表数据就是一个三级的数据展示，pid就是每个分层的标识
比如:我要查询一级的包含了中国的省级
也就是在我改变每个阶层的时候去加载当前阶层的pid就ok
select * from gf_cityaddress where pid=0;
2.代码逻辑
1.前端代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path=request.getContextPath();
%>
<!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>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/index_work.css"/>
<script type="text/javascript" src="<%=path%>/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var provinceName="";
var cityName="";
var countryName="";
$.ajax({
url:"/showCity",
type:"post",
data:{pid:0},
success:function(obj){
for(var i in obj){
$("#province").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
}
},
dataType:"json"
});
$("#province").change(function(){
//清空缓存
$("#city option:not(:first)").remove();
var cityValue=$("#province option:selected").val();
$.ajax({
url:"/showCity",
type:"post",
data:{pid:cityValue},
success:function(obj){
for(var i in obj){
$("#city").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
}
},
dataType:"json"
})
});
$("#city").change(function(){
//清理缓存
$("#country").empty();
var cityPid= $("#city option:selected").val();
$.ajax({
url:"/showCity",
data:{pid:cityPid},
type:"post",
success:function(obj){
for(var i in obj){
$("#country").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
}
},
dataType:"json"
})
});
$("#country").change(function(){
var countryId=$("#country option:selected").val();
countryName=$("#country option:selected").text();
if(countryId!=-1){
$("#address").val(provinceName+cityName+countryName);
}else{
$("#address").val(provinceName);
}
})
})
</script>
</head>
<body>
<input type="text" id="address">
<select id="province">
<option value="-1">---请选择---</option>
</select>
<select id="city">
<option value="-1">---请选择---</option>
</select>
<select id="country">
<option value="-1">---请选择---</option>
</select>
</body>
</html>
控制层:
@Autowired
private cityService service;
@RequestMapping("/")
public String index() {
return "index";
}
@RequestMapping("/showCity")
@ResponseBody
public Object showCity(String pid) {
List<GfCityaddress> showCityByPid = service.showCityByPid(pid);
System.out.println("-------:" + showCityByPid);
return showCityByPid;
}
Service逻辑层
@Autowired
private GfCityaddressMapper gfcityMapper;
public List<GfCityaddress> showCityByPid(String pid) {
System.out.println("pid:" + pid);
GfCityaddressExample example = new GfCityaddressExample();
example.createCriteria().andPidEqualTo(Integer.valueOf(pid));
List<GfCityaddress> selectByExample = gfcityMapper.selectByExample(example);
return selectByExample;
}
sql查询：
<select id="selectByPid" resultMap="BaseResultMap" parameterType="com.test.bean.GfCityaddressExample">
select * from gf_cityaddress where pid=#{pid}
</select>
3.效果图
总结:
页面加载的时候先加载pid=0的也就是省份的列表，你点击省份的时候js控制改变的时候取出来省份的id然后去加载有当前省份的pid也就是当前省份下边的市区，然后市区改变的时候取出来市区的id去加载有当前市区的pid，整个逻辑就是这样，可以看一下画的流程图。
这是我汇总的全国地址的一个sql，不是最新但是可以自测试使用
链接：https://pan.baidu.com/s/1L_s8Grcgr843VAO4SeATnA
提取码：6zrl
panlupeng
发布了10 篇原创文章 · 获赞 11 · 访问量 1339
私信
关注
标签：function,showCity,obj,SpringBoot,country,pid,AJAX,联动,var 来源： https://blog.csdn.net/weixin_44487579/article/details/104430355
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。