ajax读取xml文件-CSDN博客

本文链接：https://blog.csdn.net/hesmer/article/details/84016612

xmlAjax.jsp页面：

<%@ page language="java" pageEncoding="utf-8" %>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>HelloAjax</title>
		<script src="./js/jquery-1.6.1.js" type="text/javascript"></script>
		<script type="text/javascript">
			function helloAjax() {
				$.ajax({
					type: "post",
					url: "xx.xml",
					dateType: "xml",
					success: function(xml) {
						$(xml).find("province").each(function() {
							var t = $(this).attr("name");
							$("p").append("<font color=red>省:" + t + "</font><br/>");
							$(this).find("city").each(function() {
								$("p").append("市:" + $(this).text() + "<br/>");
							});
						});
					}
				});	
			};
		</script>
	</head>
	<body>
		<center>
			<button οnclick="helloAjax()">Ajax</button>
			<p></p>
		</center>
	</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>

执行效果：