怎么利用Ajax实现地区三级联动

这篇文章主要介绍怎么利用Ajax实现地区三级联动，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联成立于2013年，我们提供高端成都网站建设、成都网站制作、成都网站设计、网站定制、网络营销推广、微信平台小程序开发、微信公众号开发、网站推广服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为iso认证企业提供源源不断的流量和订单咨询。

前言：

利用Ajax来实现一个地区的三级联动，用Java代码来读json文件，先eclipse做一个简单的，最基础的。（json我用的jackson来解析，也可用fastjson-阿里巴巴的等还有很多）提供代码，思路之类的，注释也没有自己去想去琢磨出来的思路好

first：首先先要熟悉json文件，并要想好利用什么类型去解析，这是最难的，最好找一个没人的地方戴上耳机（对于初学）我是用maven来做的用到的jar坐标：


			redis.clients
			jedis
			2.9.0
			compile
		
		
			javax.servlet
			javax.servlet-api
			3.1.0
			provided
		
		
			com.fasterxml.jackson.core
			jackson-databind
			2.11.2

文件位置：

怎么利用Ajax实现地区三级联动

second：首先创建一个html文件 three.html

怎么利用Ajax实现地区三级联动

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

首先来实现–省--的局部刷新，利用Ajax


	$(function(){
		$.post("province",function(data){
			$.each(data,function(){
				$("#province").append(""+this.name+"");
			})
		},"json")
	})

然后来写对应的ProvinceController.class的代码（主要是逻辑，为什么我要用List>类型）

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> province = om.readValue(fi, new TypeReference>>() {});//jackson解析的方法，为什么是这个方法，百度学的 利用TypeReference可解析你想要得到的类型
		List> list = new ArrayList<>();
		Iterator> iterator = province.iterator();//我用的迭代器遍历的 foreach等 也可以 
		while(iterator.hasNext()) {
			Map 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("");
				$.each(data, function(){
					$("#city").append(""+this.name+"");
				})
			},"json");
		});

再写对应的CityController.class(代码类似)我为什么还会强转List>类型

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> province = om.readValue(fi, new TypeReference>>() {});
		List> list = new ArrayList<>();
		Iterator> iterator = province.iterator();
		while(iterator.hasNext()) {
			Map map2 = iterator.next();
			if(map2.get("code").equals(code)) {
				map2.remove("code");
				map2.remove("name");
				list=(List>) map2.get("city");
				break;
			}
			
		}
		List> list1 = new ArrayList<>();
		Iterator> iterator2 = list.iterator();
		while(iterator2.hasNext()) {
			Map 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("");
				$.each(data, function(){
					$("#village").append(""+this.name+"");
				})
			},"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> province = om.readValue(fi, new TypeReference>>() {});
		List> list = new ArrayList<>();
		Iterator> iterator = province.iterator();
		while(iterator.hasNext()) {
			Map map2 = iterator.next();
			if(map2.get("code").equals(cityCode)) {
				map2.remove("code");
				map2.remove("name");
				list=(List>) map2.get("city");
				break;
			}
			
		}
		List> list1 = new ArrayList<>();
		Iterator> iterator2 = list.iterator();
		while(iterator2.hasNext()) {
			Map next = iterator2.next();
				if(next.get("code").equals(code)) {
					next.remove("code");
					next.remove("name");
					list1 = (List>)next.get("area");
				}
		}
		om.writeValue(resp.getWriter(), list1);
		
	}
	
}

以上是“怎么利用Ajax实现地区三级联动”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

当前题目：怎么利用Ajax实现地区三级联动
网页路径：http://chengdu.cdxwcx.cn/article/ihsose.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

怎么利用Ajax实现地区三级联动

其他资讯

批处理bat如何实现批量更改一个文件夹下所有文件名的部分内容

php汉字转拼音函数的实现方法

DIV或者DIV的图片如何实现水平与垂直居中

在Linux中查看进程占用的端口号

互联网中常见射频参数有哪些

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

怎么利用Ajax实现地区三级联动

其他资讯

批处理bat如何实现批量更改一个文件夹下所有文件名的部分内容

php汉字转拼音函数的实现方法

DIV或者DIV的图片如何实现水平与垂直居中

在Linux中查看进程占用的端口号

互联网中常见射频参数有哪些

成都网站建设设计将想法与焦点和您一起共享