xml数据二级联动

最新推荐文章于 2021-03-27 11:38:16 发布

static_mkk

最新推荐文章于 2021-03-27 11:38:16 发布

阅读量666

点赞数

分类专栏： AJAX 文章标签： xml ajax

本文链接：https://blog.youkuaiyun.com/baidu_32691373/article/details/54849873

版权

AJAX 专栏收录该内容

4 篇文章

订阅专栏

package domain;

import com.thoughtworks.xstream.annotations.XStreamAsAttribute;

public class City {
	@XStreamAsAttribute
	private String name;
	@XStreamAsAttribute
	private int code;

	public City() {
	}

	public City(String name, int code) {
		super();
		this.name = name;
		this.code = code;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}

}

package domain;

import java.util.ArrayList;
import java.util.List;

import com.thoughtworks.xstream.annotations.XStreamAlias;
import com.thoughtworks.xstream.annotations.XStreamAsAttribute;
import com.thoughtworks.xstream.annotations.XStreamImplicit;

@XStreamAlias("Shengfen")
public class Shengfen {
	@XStreamAsAttribute() // 这里就是把name和code座位省份的属性来显示，并不是子接点
	private String name;
	@XStreamAsAttribute()
	private int code;

	@XStreamImplicit(itemFieldName = "CiTy")
	List<City> cities = new ArrayList<City>();

	public Shengfen() {
	}

	public Shengfen(String name, int code) {
		super();
		this.name = name;
		this.code = code;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}

	public List<City> getCities() {
		return cities;
	}

	public void setCities(List<City> cities) {
		this.cities = cities;
	}

}





package test_main;

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.thoughtworks.xstream.XStream;

import domain.City;
import domain.Shengfen;

/**
 * Servlet implementation class XML5
 */
public class XML5 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		List<Shengfen> shengfens = new ArrayList<Shengfen>();

		// 添加省份
		Shengfen zj = new Shengfen("浙江", 1);
		Shengfen ah = new Shengfen("安徽", 2);
		Shengfen sh = new Shengfen("上海", 3);

		// 为省份添加城市
		zj.getCities().add(new City("杭州", 1));
		zj.getCities().add(new City("宁波", 2));
		zj.getCities().add(new City("台州", 3));

		ah.getCities().add(new City("合肥", 1));
		ah.getCities().add(new City("阜阳", 2));
		ah.getCities().add(new City("芜湖", 3));

		sh.getCities().add(new City("松江", 1));
		sh.getCities().add(new City("黄埔", 2));
		sh.getCities().add(new City("外滩", 3));

		// 在省份shengfens的list里面添加这三个省份

		shengfens.add(sh);
		shengfens.add(ah);
		shengfens.add(zj);

		XStream xstream = new XStream();
		xstream.autodetectAnnotations(true);
		xstream.alias("ShengFen", List.class);
		String xml = xstream.toXML(shengfens);

		// 输出xml文件
		response.setContentType("text/xml;charset=utf-8");
		response.getWriter().write(xml);

	}

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

}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jutil.js"></script>
<script type="text/javascript">
/*
 * 
 <ShengFen>
 <Shengfen name="上海" code="3">
   <CiTy name="松江" code="1"/>
   <CiTy name="黄埔" code="2"/>
   <CiTy name="外滩" code="3"/>
 </Shengfen>
 <Shengfen name="安徽" code="2">
   <CiTy name="合肥" code="1"/>
   <CiTy name="阜阳" code="2"/>
   <CiTy name="芜湖" code="3"/>
 </Shengfen>
 <Shengfen name="浙江" code="1">
   <CiTy name="杭州" code="1"/>
   <CiTy name="宁波" code="2"/>
   <CiTy name="台州" code="3"/>
 </Shengfen>
</ShengFen>
 */
	 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文档，得到省份元素
					var xmlShengfen=xmlDoc.getElementsByTagName("Shengfen");
					//2.遍历省份元素
					for(var i=0;i<xmlShengfen.length;i++){
						
					//3.创建html中的select中的option选项
					var codeValue=xmlShengfen[i].getAttribute("code");
					var nameValue=xmlShengfen[i].getAttribute("name");
						
					//向select标签中添加option内容
					var o=new Option(nameValue,codeValue);
					document.getElementById("s1").add(o);
					}
					
				}
				
			}
		}
		xhr.open("GET","XML5?time="+new Date().getTime());
		xhr.send(null);
		
	}
	//省份变化，激活该函数，给城市选项相应的option
	function change(Shengfen){
		//获取当前省份选项的value值
		var SelectValue=Shengfen.value;
	
		//清楚城市的下拉选项
		document.getElementById("c1").length=1;
		//遍历xml中的省份信息，比对code的值
		//先要获取的所有的省份
		var xmlShengfen=xmlDoc.getElementsByTagName("Shengfen");
		//遍历
		for(var j=0;j<xmlShengfen.length;j++){
			if(SelectValue==xmlShengfen[j].getAttribute("code")){
				//获取该省份下面的城市的信息
				var xmlCity=xmlShengfen[j].getElementsByTagName("CiTy");
				//上面获取的是CiTy元素的内容（就是一个数组）
				for(var i=0;i<xmlCity.length;i++){
					//给城市选选项框内容赋值
				var o=new Option(xmlCity[i].getAttribute("name"),xmlCity[i].getAttribute("code"));
					document.getElementById("c1").add(o);
				}
				
			}
			
		}
		
	
	}

</script>

<title>省市二级联动</title>
</head>
<body>

省份：	<select id="s1" οnchange="change(this)">
		<option>--请选择--</option>
		</select>
城市：<select id="c1">
		<option>--请选择--</option>
	</select>

</body>
</html>