颇受启发的一个jQuery Ajax例子~

demo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>jquery xml解析</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$.ajax( {
					url : "xx.xml",
					success : function(xml) {
						$(xml).find("province").each(function() {
							var t = $(this).attr("name");//this->   
								$("#DropProvince").append(
										"<option>" + t + "</option>");
							});
					}
				});
				$("#DropProvince").change(
						function() {
							$("#sCity>option").remove();
							var pname = $("#DropProvince").val();
							$.ajax( {
								url : "xx.xml",
								success : function(xml) {
									$(xml).find(
											"province[name='" + pname
													+ "']>city").each(
											function() {
												$("#sCity").append(
														"<option>"
																+ $(this)
																		.text()
																+ "</option>");
											});
								}
							});
						});
			});
</script>
</head>
<body>
<form id="form1">
<div>
	<select id="DropProvince" style="width: 60px;">
		<option>请选择</option>
	</select>
	<select id="sCity" style="width: 60px;">
	</select>
</div>
</form>
</body>
</html>


xx.xml
<?xml version="1.0" encoding="utf-8" ?>  
<provinces>  
	<province name="湖北">  
		<city>武汉</city>  
		<city>黄石</city>  
		<city>宜昌</city>  
		<city>天门</city>  
	</province>  
	<province name="湖南">  
		<city>邵阳</city>  
		<city>长沙</city>  
		<city>岳阳</city>  
	</province>  
	<province name="广东">  
		<city>广州</city>  
		<city>深圳</city>  
	</province>  
</provinces>


从这个例子中学到了很多..
有联动菜单的思路..ajax解析xml方式..以及ajax的代码..
很受启发!

你可能感兴趣的:(java,jquery,jsp,Ajax,xml)