Ajax實(shí)現(xiàn)三級聯(lián)動(dòng)效果
本文實(shí)例為大家分享了ajax實(shí)現(xiàn)三級聯(lián)動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下
一、導(dǎo)入數(shù)據(jù)表和gson.jar
該表包括了中國所有的省、市、縣、區(qū)，它們之間通過parentid關(guān)聯(lián)。
二、后端代碼
由于每一級的數(shù)據(jù)都是根據(jù)上一級的id查詢而來，邏輯十分相似，故我們只需要一個(gè)接口就可以完成三級甚至更多級的聯(lián)動(dòng)，在這個(gè)案例中我們的核心查詢就是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>三級聯(lián)動(dòng)</h2>
<hr/>
<select name="pro" id="proviance">
<option>選擇省份</option>
</select>
<select name="city" id="city">
<option>選擇城市</option>
</select>
<select name="country" id="country">
<option>請選擇區(qū)域</option>
</select>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持碩編程。
學(xué)習(xí)AJAX