Ajax 三级联动，处理xml格式数据

最新推荐文章于 2023-02-17 14:08:41 发布

●杨毅

最新推荐文章于 2023-02-17 14:08:41 发布

阅读量954

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/cnm_1314/article/details/38712073

版权

javaWeb 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前台

<script type="text/javascript">
	var xmlHttp;
	function createXMLHttpRequest(){
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else if(window.ActiveXObject){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	function refreshModelList(){
		var modelYear = document.getElementById("modelYear").value;
		var make = document.getElementById("make").value;
		if(modelYear == "" || make == ""){
			clearModelList();
			return;
		}
			//创建XMLHttpRequest对象
		createXMLHttpRequest();
		var url = "<%=request.getContextPath()%>/servlet/RefreshModelListServlet?"+createQueryString(modelYear,make);
		xmlHttp.onreadystatechange = handleStateChange;
		xmlHttp.open("get",url,true);
		xmlHttp.send();
	}
	function handleStateChange(){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				updateModelList();
			}
		}
	}
	function updateModelList(){
			//首先清除ModelList列表框
		clearModelList();
		var models = document.getElementById("models");
		var results = xmlHttp.responseXML.getElementsByTagName("model");
		var option = null;
		for(var i = 0; i < results.length; i++){
			option = document.createElement("option");
			option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
			models.appendChild(option);
		}
	}
	function createQueryString(modelYear,make){
		return "modelYear="+modelYear+"&make="+make+"&ts="+(new Date().getTime());
	}
	function clearModelList(){
		var models = document.getElementById("models");
		while(models.length > 0){
			models.removeChild(models.childNodes[0]);
		}
	}
	
	
</script>
  </head>
  <body>
    <h1>Select Model Year and Make</h1>
    <span style="font-weight: bold;">Model Year:</span>
    <select id="modelYear" οnchange="refreshModelList()">
    	<option value="">Select One</option>
    	<option value="2006">2006</option>
    	<option value="1995">1995</option>
    	<option value="1985">1985</option>
    	<option value="1970">1970</option>
    </select>
    <br /> <br />
    <span style="font-weight: bold;">Make:</span>
    <select id="make" οnchange="refreshModelList()">
    	<option value="">Select One</option>
    	<option value="Chevrolet">Chevrolet</option>
    	<option value="Dodge">Dodge</option>
    	<option value="Pontiac">Pontiac</option>
    </select>
    <br /> <br />
    <span style="font-weight: bold;">Models:</span>
     <br />
    <select id="models" size="6" style="width: 300ps">
    	<option value="">Models are Expty.</option>
    </select>
  </body>

后台

public class RefreshModelListServlet extends HttpServlet {

	private static List<MakeModelYear> availableModels = new ArrayList<MakeModelYear>();

	public void init() throws ServletException {
		availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));
		availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
		availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
		availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
		availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));
		availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
		availableModels.add(new MakeModelYear(1985, "Dodge", "Dayona"));
		availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
		availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));
		availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
		availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
		availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
		availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));
		
		availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
		availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
		availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
		availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));
		availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
		availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
		availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
		availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));
		availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));
		availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
		availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));
		availableModels.add(new MakeModelYear(1985, "Chevrolet", "Bel Air"));
		availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
		availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
		availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));
		availableModels.add(new MakeModelYear(1970, "Chevrolet", "Celebrity"));
		
		availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
		availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
		availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
		availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));
		availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
		availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
		availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
		availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));
		availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
		availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
		availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
		availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));
		availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
		availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
		availableModels.add(new MakeModelYear(1970, "Pontiac", "LeManas"));
		availableModels.add(new MakeModelYear(1970, "Pontiac", "Temppest"));
	}

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

		response.setContentType("text/xml;charset=UTF-8");
		PrintWriter out = response.getWriter();
		int modelYear = Integer.parseInt(request.getParameter("modelYear"));
		String make = request.getParameter("make");

		StringBuffer results = new StringBuffer("<models>");
		MakeModelYear availableModel = null;
		Iterator<MakeModelYear> it = availableModels.iterator();
		while(it.hasNext()){
			availableModel = it.next();
			if(availableModel.getModelYear() == modelYear && availableModel.getMake().equals(make)){
				results.append("<model>");
				results.append(availableModel.getModel());
				results.append("</model>");
			}
		}
		results.append("</models>");
		out.println(results.toString());
		out.close();
	}

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

		this.doGet(request, response);
	}

}

●杨毅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 三级联动，处理xml格式数据

前台 var xmlHttp; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
复制链接

扫一扫