使用Ajax的方式实现两级联动的例子。要全-Java教程-爱易网页

使用Ajax的方式实现两级联动的例子。要全

日期：2014-05-19　浏览次数：20861 次

求一个使用Ajax的方式实现两级联动的例子。。要全
举个例子，
就比如
分类
男装外套    男装羽绒服
            男装马甲
女装外套    女装大衣
            女装风衣。

最好把与Ajax相对应的servlet也发上来。。谢谢了。

------解决方案--------------------
这是一个城市两级联动的，应该符合你的要求。



<!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">

<title>Insert title here</title>

</head>

<body>

	<!-- 

		北京bj

			东城

			西城

    		崇文

		天津

          	  和平

           	 河东

          	  河西

	 -->

	<select id="city">

		<option value="bj">北京</option>

		<option value="tj">天津</option>

	</select >

	<select id="country"></select>

	

	<script type="text/javascript">

		alert("1");

		var city = document.getElementById("city");

		city.onchange = function() {

			alert("2");

			//document.getElementById("city").value;

			var value = this.value;

			var xhr;

			if(window.XMLHttpRequest) {

				xhr = new XMLHttpRequest();

			}else if(window.ActiveXObject) {

				xhr = new ActiveXObject(

						"Microsoft.XMLHttp"

					);

			}

			xhr.onreadystatechange = function() {

				if(xhr.readyState == 4) {

					if(xhr.status == 200){

						//xxx-xxx-xx

						var content = xhr.responseText;

						var countrys = content.split("-");

						var c = document.getElementById("country");

						var children = c.childNodes;

						while(c.hasChildNodes()) {

							c.removeChild(children[0]);

						}

						for(var i=0;i<countrys.length;i++) {

							//alert("xxx");

							var option = document.createElement("option");

							option.innerHTML = countrys[i];

							

							c.appendChild(option);

						}

					}

				}

			}

			xhr.open("GET","cityServlet?city=" + value,true);

			xhr.send(null);

		}

	</script>

</body>

</html>

下面是服务端：



package com.briup.servlet;



import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;



import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



import com.sun.corba.se.impl.ior.WireObjectKeyTemplate;



/**

 * Servlet implementation cl

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

使用Ajax的方式实现两级联动的例子。要全

相关资料更多>

推荐阅读更多>