jquery xml解析

最新推荐文章于 2021-06-05 17:13:31 发布

原创最新推荐文章于 2021-06-05 17:13:31 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

JAVASCRIPT 专栏收录该内容

75 篇文章

订阅专栏

本文介绍了一个使用jQuery进行XML解析的示例项目。通过Ajax获取XML文件内容，并使用jQuery选择器遍历XML节点，实现省份及其下属城市的动态加载。具体包括从XML中读取省份名称填充到下拉列表，当省份发生变化时，再次请求XML并更新城市下拉列表。

<%@ 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>

<%@ 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

Java代码