如何利用Ajax實現(xiàn)地區(qū)三級聯(lián)動詳解
前言：
利用ajax來實現(xiàn)一個地區(qū)的三級聯(lián)動，用java代碼來讀json文件，先eclipse做一個簡單的，最基礎(chǔ)的。（json我用的jackson來解析，也可用fastjson-阿里巴巴的等還有很多）提供代碼，思路之類的，注釋也沒有自己去想去琢磨出來的思路好
first：首先先要熟悉json文件，并要想好利用什么類型去解析，這是最難的，最好找一個沒人的地方戴上耳機（對于初學）我是用maven來做的用到的jar坐標 ：
<dependency> <groupid>redis.clients</groupid> <artifactid>jedis</artifactid> <version>2.9.0</version> <scope>compile</scope> </dependency> <dependency> <groupid>javax.servlet</groupid> <artifactid>javax.servlet-api</artifactid> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupid>com.fasterxml.jackson.core</groupid> <artifactid>jackson-databind</artifactid> <version>2.11.2</version> </dependency>
文件位置：
second：首先創(chuàng)建一個html文件 three.html
加了一個字體居中和大小的樣式以至于不會太難看，太原生
首先來實現(xiàn)–省--的局部刷新，利用ajax
<script type="text/javascript">
$(function(){
$.post("province",function(data){
$.each(data,function(){
$("#province").append("<option value="+this.code+">"+this.name+"</option>");
})
},"json")
})
</script>
然后來寫對應的provincecontroller.class的代碼（主要是邏輯，為什么我要用list<map<string,object>>類型）
package com.daben.controller;
import java.io.fileinputstream;
import java.io.ioexception;
import java.util.arraylist;
import java.util.iterator;
import java.util.list;
import java.util.map;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import com.fasterxml.jackson.core.type.typereference;
import com.fasterxml.jackson.databind.objectmapper;
@webservlet("/province")
public class provincecontroller extends httpservlet{
private static final long serialversionuid = -6513954606070061277l;
@override
protected void doget(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
this.dopost(req, resp);
}
@override
protected void dopost(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
resp.setcontenttype("appliaction/json;charset=utf-8");//可加可不加，json可在前端標注也可在后端 看自己習慣 我前后都加了
objectmapper om = new objectmapper(); //jackson核心類
string path = req.getservletcontext().getrealpath("/web-inf/classes/city_code.json");//利用servletcontext(也有叫appliaction)來拿到文件的真實路徑，也可以利用加載器拿都一樣
fileinputstream fi = new fileinputstream(path);//流
list<map<string, object>> province = om.readvalue(fi, new typereference<list<map<string,object>>>() {});//jackson解析的方法，為什么是這個方法，百度學的 利用typereference可解析你想要得到的類型
list<map<string,object>> list = new arraylist<>();
iterator<map<string, object>> iterator = province.iterator();//我用的迭代器遍歷的 foreach等 也可以
while(iterator.hasnext()) {
map<string, object> map2 = iterator.next();
map2.remove("city");//可寫也可不寫
list.add(map2);
}
om.writevalue(resp.getwriter(), list);
}
}
在three.html添加改變事件
代碼比較簡單，就是跟簡單的清空 賦值 取值
$("#province").on("change", function(){
let code = $(this).find(":selected").val();
$.post("city",{"code":code}, function(data){
$("#city").empty();
$("#city").append("<option>---市---</option>");
$.each(data, function(){
$("#city").append("<option value="+this.code+">"+this.name+"</option>");
})
},"json");
});
再寫對應的citycontroller.class(代碼類似)我為什么還會強轉(zhuǎn)list<map<string,object>>類型
package com.daben.controller;
import java.io.fileinputstream;
import java.io.ioexception;
import java.util.arraylist;
import java.util.iterator;
import java.util.list;
import java.util.map;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import com.fasterxml.jackson.core.type.typereference;
import com.fasterxml.jackson.databind.objectmapper;
@webservlet("/city")
public class citycontroller extends httpservlet{
private static final long serialversionuid = -6513954606070061277l;
@override
protected void doget(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
this.dopost(req, resp);
}
@suppresswarnings("unchecked")
@override
protected void dopost(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
resp.setcontenttype("appliaction/json;charset=utf-8");
string code = req.getparameter("code");
req.getsession().setattribute("citycode", code);
objectmapper om = new objectmapper();
string path = req.getservletcontext().getrealpath("/web-inf/classes/city_code.json");
fileinputstream fi = new fileinputstream(path);
list<map<string, object>> province = om.readvalue(fi, new typereference<list<map<string,object>>>() {});
list<map<string,object>> list = new arraylist<>();
iterator<map<string, object>> iterator = province.iterator();
while(iterator.hasnext()) {
map<string, object> map2 = iterator.next();
if(map2.get("code").equals(code)) {
map2.remove("code");
map2.remove("name");
list=(list<map<string,object>>) map2.get("city");
break;
}
}
list<map<string,object>> list1 = new arraylist<>();
iterator<map<string,object>> iterator2 = list.iterator();
while(iterator2.hasnext()) {
map<string,object> next = iterator2.next();
next.remove("area");
list1.add(next);
}
om.writevalue(resp.getwriter(), list1);
}
}
不懂的話，可以先看一看city_code.json文件，多想一想
繼續(xù)來three.html
$("#city").on("change", function(){
let code = $(this).find(":selected").val();
$.post("village",{"code":code}, function(data){
$("#village").empty();
$("#village").append("<option>---縣---</option>");
$.each(data, function(){
$("#village").append("<option value="+this.code+">"+this.name+"</option>");
})
},"json");
代碼雷同以至于villagecontroller.class也是雷同，加了一些判斷而已多了一個循環(huán)，
package com.daben.controller;
import java.io.fileinputstream;
import java.io.ioexception;
import java.util.arraylist;
import java.util.iterator;
import java.util.list;
import java.util.map;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import com.fasterxml.jackson.core.type.typereference;
import com.fasterxml.jackson.databind.objectmapper;
@webservlet("/village")
public class villagecontroller extends httpservlet{
private static final long serialversionuid = -6513954606070061277l;
@override
protected void doget(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
this.dopost(req, resp);
}
@suppresswarnings("unchecked")
@override
protected void dopost(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
resp.setcontenttype("appliaction/json;charset=utf-8");
string code = req.getparameter("code");
string citycode = (string)req.getsession().getattribute("citycode");
objectmapper om = new objectmapper();
string path = req.getservletcontext().getrealpath("/web-inf/classes/city_code.json");
fileinputstream fi = new fileinputstream(path);
list<map<string, object>> province = om.readvalue(fi, new typereference<list<map<string,object>>>() {});
list<map<string,object>> list = new arraylist<>();
iterator<map<string, object>> iterator = province.iterator();
while(iterator.hasnext()) {
map<string, object> map2 = iterator.next();
if(map2.get("code").equals(citycode)) {
map2.remove("code");
map2.remove("name");
list=(list<map<string,object>>) map2.get("city");
break;
}
}
list<map<string,object>> list1 = new arraylist<>();
iterator<map<string,object>> iterator2 = list.iterator();
while(iterator2.hasnext()) {
map<string,object> next = iterator2.next();
if(next.get("code").equals(code)) {
next.remove("code");
next.remove("name");
list1 = (list<map<string,object>>)next.get("area");
}
}
om.writevalue(resp.getwriter(), list1);
}
}
完結(jié)：只提供了代碼，但是為什么這樣何不自己去想一想？
json地區(qū)文件下載：
關(guān)注公眾號 “程序員零距離” 回復 “201231” 即可下載
↑關(guān)注上方公眾號回復 “201231” 即可下載↑
思考？可不可以用xml文件來代替json文件？將jackson換成jsoup來解析？
到此這篇關(guān)于如何利用ajax實現(xiàn)地區(qū)三級聯(lián)動詳解的文章就介紹到這了,更多相關(guān)ajax實現(xiàn)地區(qū)三級聯(lián)動內(nèi)容請搜索碩編程以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持碩編程！
學習AJAX