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