ajax 、json 动态实现二级联动下拉菜单的功能

爱睡觉的小馨

于 2021-07-20 12:03:33 发布

阅读量424

点赞数

分类专栏： JSP

本文链接：https://blog.csdn.net/qq_45696288/article/details/118154885

版权

Ajax JavaScript Servlet 二级联动动态更新

关键词由CSDN通过智能技术生成

JSP 专栏收录该内容

48 篇文章 12 订阅

订阅专栏

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动实现</title>

<script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
<script type="text/javascript">
	var xhr;
	function change1(val){
		//发送ajax请求进行数据查询	
		//1、创建XMLHttpRequest对象
		xhr = new XMLHttpRequest();
		//2、和服务器建立连接
		xhr.open("get","AjaxLD2Servlet?id="+val,true);    /* true表示异步的形式请求 */
		//3、执行回调函数
		xhr.onreadystatechange = process;
		//4、发送数据
		xhr.send(null);
	}
	function process() {
		if(xhr.readyState==4 && xhr.status==200){
			var text = xhr.responseText;
			var json = JSON.parse(text);
			//console.log(text);
			//获取sel对象
			var sel = document.getElementById("sel");
			//清空之前的操作内容(相当于初始化一次)
			sel.innerHTML = "<option>--请选择--</option>"
			for(var i in json){
				sel.innerHTML +="<option>"+json[i]+"</option>"
			}
		}
	}
</script>

</head>
<body>

省份
<select onchange="change1(this.value)">
	<option>--请选择--</option>
	<option value="1">山东省</option>
	<option value="2">河南省</option>
	<option value="3">江苏省</option>
</select>
市
<select id="sel">
	<option>--请选择--</option>
</select>

</body>
</html>

AjaxLD2Servlet

package cn.ajax.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
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.google.gson.Gson;

/**
 * Servlet implementation class AjaxLD2Servlet
 */
@WebServlet("/Ajax/AjaxLD2Servlet")
public class AjaxLD2Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxLD2Servlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		String id = request.getParameter("id");
		List<String> list1 = new ArrayList<String>();
		list1.add("济南市");
		list1.add("青岛市");
		list1.add("济宁市");
		list1.add("威海市");
		List<String> list2 = new ArrayList<String>();
		list2.add("杭州市");
		list2.add("宁波市");
		list2.add("金华市");
		list2.add("温州市");
		List<String> list3 = new ArrayList<String>();
		list3.add("南京市");
		list3.add("徐州市");
		list3.add("无锡市");
		list3.add("苏州市");
		
		Map<String, List<String>> map = new HashMap<String, List<String>>();
		map.put("1", list1);
		map.put("2", list2);
		map.put("3", list3);
		
		List<String> list = map.get(id);
		String json = new Gson().toJson(list);
		response.getWriter().print(json);
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

爱睡觉的小馨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax 、json 动态实现二级联动下拉菜单的功能

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>二级联动实现</title><script type="text/javascript" src="../js/j.
复制链接

扫一扫