用Ajax写地区三级联动的代码是什么

时间2024-03-26 22:24:04发布访客分类其他前端知识浏览821

导读：这篇文章主要给大家介绍“用Ajax写地区三级联动的代码是什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“用Ajax写地区三级联动的代码是什么”文章能对大家有所帮助。...

这篇文章主要给大家介绍“用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的代码（主要是逻辑，为什么我要用ListMapString,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);
    //流
		ListMapString, Object>
    >
     province = om.readValue(fi, new TypeReferenceListMapString,Object>
    >
    >
() {
}
    );
    //jackson解析的方法，为什么是这个方法，百度学的 利用TypeReference可解析你想要得到的类型
		ListMapString,Object>
    >
     list = new ArrayList>
    ();
    
		IteratorMapString, Object>
    >
     iterator = province.iterator();
//我用的迭代器遍历的 foreach等 也可以 
		while(iterator.hasNext()) {
    
			MapString, 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(代码类似)我为什么还会强转ListMapString,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);
    
		ListMapString, Object>
    >
     province = om.readValue(fi, new TypeReferenceListMapString,Object>
    >
    >
() {
}
    );
    
		ListMapString,Object>
    >
     list = new ArrayList>
    ();
    
		IteratorMapString, Object>
    >
     iterator = province.iterator();

		while(iterator.hasNext()) {
    
			MapString, Object>
     map2 = iterator.next();

			if(map2.get("code").equals(code)) {
    
				map2.remove("code");
    
				map2.remove("name");
    
				list=(ListMapString,Object>
    >
    ) map2.get("city");
    
				break;

			}

			
		}
    
		ListMapString,Object>
    >
     list1 = new ArrayList>
    ();
    
		IteratorMapString,Object>
    >
     iterator2 = list.iterator();

		while(iterator2.hasNext()) {
    
			MapString,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);
    
		ListMapString, Object>
    >
     province = om.readValue(fi, new TypeReferenceListMapString,Object>
    >
    >
() {
}
    );
    
		ListMapString,Object>
    >
     list = new ArrayList>
    ();
    
		IteratorMapString, Object>
    >
     iterator = province.iterator();

		while(iterator.hasNext()) {
    
			MapString, Object>
     map2 = iterator.next();

			if(map2.get("code").equals(cityCode)) {
    
				map2.remove("code");
    
				map2.remove("name");
    
				list=(ListMapString,Object>
    >
    ) map2.get("city");
    
				break;

			}

			
		}
    
		ListMapString,Object>
    >
     list1 = new ArrayList>
    ();
    
		IteratorMapString,Object>
    >
     iterator2 = list.iterator();

		while(iterator2.hasNext()) {
    
			MapString,Object>
     next = iterator2.next();

				if(next.get("code").equals(code)) {
    
					next.remove("code");
    
					next.remove("name");
    
					list1 = (ListMapString,Object>
    >
    )next.get("area");

				}

		}
    
		om.writeValue(resp.getWriter(), list1);

		
	}

	
}

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

感谢各位的阅读，以上就是“用Ajax写地区三级联动的代码是什么”的内容了，通过以上内容的阐述，相信大家对用Ajax写地区三级联动的代码是什么已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注网络，网络将为大家推送更多相关知识点的文章。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处：用Ajax写地区三级联动的代码是什么
本文地址： https://pptw.com/jishu/653797.html

Golang反射作用是什么，使用场景有哪些在Golang中怎样判断文件可否写入，方法是什么