怎么利用Ajax實(shí)現(xiàn)地區(qū)三級聯(lián)動

這篇文章主要介紹怎么利用Ajax實(shí)現(xiàn)地區(qū)三級聯(lián)動，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)成立于2013年，我們提供高端成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)站定制、網(wǎng)絡(luò)營銷推廣、微信平臺小程序開發(fā)、微信公眾號開發(fā)、網(wǎng)站推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項(xiàng)目落地，為iso認(rèn)證企業(yè)提供源源不斷的流量和訂單咨詢。

前言：

利用Ajax來實(shí)現(xiàn)一個地區(qū)的三級聯(lián)動，用Java代碼來讀json文件，先eclipse做一個簡單的，最基礎(chǔ)的。（json我用的jackson來解析，也可用fastjson-阿里巴巴的等還有很多）提供代碼，思路之類的，注釋也沒有自己去想去琢磨出來的思路好

first：首先先要熟悉json文件，并要想好利用什么類型去解析，這是最難的，最好找一個沒人的地方戴上耳機(jī)（對于初學(xué)）我是用maven來做的用到的jar坐標(biāo) ：

<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>

文件位置：

怎么利用Ajax實(shí)現(xiàn)地區(qū)三級聯(lián)動

second：首先創(chuàng)建一個html文件 three.html

怎么利用Ajax實(shí)現(xiàn)地區(qū)三級聯(lián)動

怎么利用Ajax實(shí)現(xiàn)地區(qū)三級聯(lián)動

加了一個字體居中和大小的樣式以至于不會太難看，太原生

首先來實(shí)現(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>

然后來寫對應(yīng)的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可在前端標(biāo)注也可在后端 看自己習(xí)慣 我前后都加了
		ObjectMapper om = new ObjectMapper(); //jackson核心類
		String path = req.getServletContext().getRealPath("/WEB-INF/classes/city_code.json");//利用servletContext(也有叫appliaction)來拿到文件的真實(shí)路徑，也可以利用加載器拿都一樣
		FileInputStream fi = new FileInputStream(path);//流
		List<Map<String, Object>> province = om.readValue(fi, new TypeReference<List<Map<String,Object>>>() {});//jackson解析的方法，為什么是這個方法，百度學(xué)的 利用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");
		});

再寫對應(yīng)的CityController.class(代碼類似)我為什么還會強(qiáng)轉(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);
		
	}
	
}

以上是“怎么利用Ajax實(shí)現(xiàn)地區(qū)三級聯(lián)動”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：怎么利用Ajax實(shí)現(xiàn)地區(qū)三級聯(lián)動
標(biāo)題路徑：http://muchs.cn/article34/ihsose.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、定制網(wǎng)站、建站公司、網(wǎng)站維護(hù)、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司