如何利用Ajax实现地区三级联动详解_Ajax

前言：

利用ajax来实现一个地区的三级联动，用java代码来读json文件，先eclipse做一个简单的，最基础的。（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：首先创建一个html文件 three.html

加了一个字体居中和大小的样式以至于不会太难看，太原生

首先来实现–省--的局部刷新，利用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(代码类似)我为什么还会强转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文件，多想一想

继续来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也是雷同，加了一些判断而已多了一个循环，

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);
		
	}
	
}

完结：只提供了代码，但是为什么这样何不自己去想一想？