ajax使用之二级联动（省市）

最新推荐文章于 2020-07-12 10:11:42 发布

花2不谢

最新推荐文章于 2020-07-12 10:11:42 发布

阅读量981

点赞数

本文链接：https://blog.csdn.net/qq_25821067/article/details/51712784

版权

Java 同时被 2 个专栏收录

77 篇文章 1 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

ajax经常用于二级联动，实现的效果如下:

前台显示代码:

<span style="font-size:18px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省市二级联动</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
	<script type="text/javascript">
		
		var xmlDoc;
		window.οnlοad=function(){
			
			//发出异步请求
			var xhr = getXHR();
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){
					if(xhr.status==200){
						xmlDoc = xhr.responseXML;
						
						//给省份赋值：XML DOM和HTML DOM
						//-------------------------------------
						//1、解析XML文档，得到所有的province元素
						var xmlProvinces = xmlDoc.getElementsByTagName("province");
						//2、遍历province元素，得到他的属性code 和name的值
						for(var i=0;i<xmlProvinces.length;i++){
							var codeValue = xmlProvinces[i].getAttribute("code");
							var nameValue = xmlProvinces[i].getAttribute("name");
							//alert(codeValue+":"+nameValue);
							//3、创建HTML中的option对象，给id=p1的元素添加子元素
							var o = new Option(nameValue,codeValue);//HTML DOM
							document.getElementById("p1").add(o);
						}
						
					}
				}
			}
			xhr.open("GET","AjaxDemo4"+"?=time"+new Date().getTime());
			xhr.send(null);
			
		}
		//省份的变化，引起城市的变化
		function selectCity(provinceObj){
			//取到当前的选项的值
			var selectValue = provinceObj.value;
			//清除城市下拉内容
			document.getElementById("c1").length=1;
			//遍历xml文档中的省份元素，比对code的值
			var xmlProvinces = xmlDoc.getElementsByTagName("province");
			for(var i=0;i<xmlProvinces.length;i++){
				//找到了：把他的子元素city取出来
				if(selectValue == xmlProvinces[i].getAttribute("code")){
					var xmlCitys = xmlProvinces[i].getElementsByTagName("city");
					//给HTML中的city下拉选择添加option
					for(var j=0;j<xmlCitys.length;j++){
						var o = new Option(xmlCitys[j].getAttribute("name"),xmlCitys[j].getAttribute("code"));//HTML DOM
						document.getElementById("c1").add(o);
					}
				}
				
			}
		}
	</script>
  </head>
  
  <body>
	省份：<select id="p1" οnchange="selectCity(this)">
		<option value="">--请选择--</option>
	</select>
	城市：<select id="c1">
		<option value="">--请选择--</option>
	</select>
  </body>
</html></span>

后台servlet代码：

<span style="font-size:18px;">package com.levi.servletajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;




import com.levi.domain.City;
import com.levi.domain.Province;
import com.thoughtworks.xstream.XStream;

public class AjaxDemo4 extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		List<Province> provinces = new ArrayList<Province>();
		Province sd = new Province(37, "山东省");
		Province hb = new Province(42, "湖北省");
		Province hn = new Province(41, "河南省");
		
		sd.getCitys().add(new City(01, "济南市"));
		sd.getCitys().add(new City(02, "青岛市"));
		sd.getCitys().add(new City(03, "淄博市"));
		
		hb.getCitys().add(new City(01, "武汉市"));
		hb.getCitys().add(new City(02, "黄冈市"));
		hb.getCitys().add(new City(03, "襄阳市"));
		
		hn.getCitys().add(new City(01, "郑州市"));
		hn.getCitys().add(new City(02, "开封市"));
		hn.getCitys().add(new City(03, "洛阳市"));
		
		provinces.add(sd);
		provinces.add(hb);
		provinces.add(hn);
		
		XStream xs = new XStream();
		xs.autodetectAnnotations(true);//使用注解生成别名
		xs.alias("provinces", List.class);
		String xml = xs.toXML(provinces);
		
		//输出xml文件
		response.setContentType("text/xml;charset=UTF-8");
		response.getWriter().write(xml);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}
</span>

其中用到了xstream-1.3.1.jar这个第三方包（在javabean和xml之间转换）。其中获得XMLHttpRequest对象的函数封装在了util.js里面

<span style="font-size:18px;">/**
 * 得到XMLHttpRequest对象
 */
function getXHR(){
	var xmlHttp;
	try {
		xmlHttp=new XMLHttpRequest();
	}catch(e)
	{
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
		{
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e)
			{
				alert("你的浏览器不支持ajax");
				return false;
			}
			
		}
		
	}
	return xmlHttp;
}</span>