Ajax实现三级联动效果
更新时间：2021年10月04日 10:09:41 作者：想到的名字都被人用了
这篇文章主要为大家详细介绍了Ajax实现三级联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Ajax实现三级联动效果的具体代码，供大家参考，具体内容如下
一、导入数据表和gson.jar
该表包括了中国所有的省、市、县、区，它们之间通过parentid关联。
二、后端代码
由于每一级的数据都是根据上一级的id查询而来，逻辑十分相似，故我们只需要一个接口就可以完成三级甚至更多级的联动，在这个案例中我们的核心查询就是select * from area where parentid=#{pid}
entity
package com.codeXie.entity;
import java.io.Serializable;
public class Area implements Serializable {
private String areaid;
private String areaname;
private String parentid;
private Integer arealevel;
private Integer status;
public Area() {
}
public Area(String areaid, String areaname, String parentid, Integer arealevel, Integer status) {
this.areaid = areaid;
this.areaname = areaname;
this.parentid = parentid;
this.arealevel = arealevel;
this.status = status;
}
.......省略了对各属性的set、get
}
mapper
public interface AreaMapper {
@Select("select * from area where parentid=#{pid}")
List<Area> selectMore(Integer pid);
}
service
public interface AreaService {
List<Area> findCity(int pid);
}
servlet
@WebServlet("/AreaServlet")
public class AreaServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String pid = req.getParameter("pid");
AreaServiceImpl service = new AreaServiceImpl();
List<Area> areas = service.findCity(Integer.parseInt(pid));
String json = new Gson().toJson(areas);
resp.getWriter().print(json);
}
}
三、前端代码
<script src="js/jquery.js"></script>
<script>
function produceOption(id,list){
console.log(list)
$(id).empty()
$(list).each((index,item)=>{
$(id).append("<option value="+item.areaid+">"+item.areaname+"</option>")
})
}
$(()=>{
$.ajax({
url:"AreaServlet",
method:"post",
data:{pid:0},
dataType:"json",
success: function(res) {
produceOption("#proviance",res)
$("#proviance").prepend("<option selected='selected'>请选择省份</option>")
}
})
$("#proviance").change(function(){
var pid = $(this).prop("value")
$.ajax({
url:"AreaServlet",
method:"post",
data:{pid:pid},
dataType:"json",
success: function(res) {
produceOption("#city",res)
$("#city").prepend("<option selected='selected'>请选择城市</option>")
}
})
})
$("#city").on("change",function(){
var pid = $(this).prop("value")
$.ajax({
url:"AreaServlet",
method:"post",
data:{pid:pid},
dataType:"json",
success: function(res) {
produceOption("#country",res)
}
})
})
})
</script>
</head>
<body>
<h2>三级联动</h2>
<hr/>
<select name="pro" id="proviance">
<option>选择省份</option>
</select>
<select name="city" id="city">
<option>选择城市</option>
</select>
<select name="country" id="country">
<option>请选择区域</option>
</select>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了一个简单Ajax类库及使用方法,结合实例形式分析了ajax类库的源码与具体使用技巧,需要的朋友可以参考下2016-04-04
163 AJAX Tab...2007-01-01
AJAX技术经过这么多年的发展，出现了一些框架或类库用于简化开发工作，不同的框架类库的使用方法也各不相同。 现在，再回头看看这些技术，看看这些框架类库，我们能感受到技术在不断地发展，AJAX开发越来越容易了。2015-09-09
这篇文章主要为大家详细介绍了ajax无刷新验证注册信息示例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10![[js]轻便的XMLHttpRequest应用函数：downloadUrl()](//img.jbzj.com/images/xgimg/bcimg4.png)
[js]轻便的XMLHttpRequest应用函数：downloadUrl()
[js]轻便的XMLHttpRequest应用函数：downloadUrl()...2007-04-04
AJAX初级聊天室代码...2007-01-01
AJAX开发者的最新工具和技术...2006-09-09
在web页面中使用ajax加载进度条，可以让用户预先判断等待的时间，而且还可以减少用户等待信息加载过程中的心理焦虑感，所以进度条加载必不可少，下面小编给大家介绍ajax加载进度条代码是如何实现的2015-10-10
关于前端ajax请求的优雅方案（http客户端为axios）
这篇文章主要给大家介绍了关于前端ajax请求的优雅方案，本文http客户端为axios，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的ajax都有,ajax有的axios不一定有,总结一句话就是axios是ajax,ajax不止axios,本文对Axios和Ajax的区别是什么给大家讲解的非常详细,需要的朋友一起看看吧2023-10-10
![[js]轻便的XMLHttpRequest应用函数：downloadUrl()](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论