xml數據二級聯動

2019-11-14 12:16:25

字體：大中小

來源：轉載

供稿：網友

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.onload=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" onchange="change(this)">		<option>--請選擇--</option>		</select>城市：<select id="c1">		<option>--請選擇--</option>	</select></body></html>