Ajax实现三级联动效果
程序员文章站
2022-06-10 08:26:30
本文实例为大家分享了ajax实现三级联动效果的具体代码,供大家参考,具体内容如下一、导入数据表和gson.jar该表包括了中国所有的省、市、县、区,它们之间通过parentid关联。二、后端代码由于每...
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。