您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > [原]使用jQuery操作XML

[原]使用jQuery操作XML

文章來源：365jz.com 點擊數(shù)：6202 更新時間：2009-09-16 11:36 參與評論

上回介紹了使用XML DOM操作XML 地址在這

優(yōu)點：速度快，本地可執(zhí)行
缺點：需要額外的學(xué)習(xí)XMLDOM和XPATH相關(guān)知識，需要花時間：）

這次介紹使用jQuery固有方法操作XML

優(yōu)點：只要會jQuery，不需要額外的XMLDOM,XPATH知識
缺點：速度比DOM慢，只能在服務(wù)器運行（必須使用http://xx.com/aa.htm這樣的形式訪問）

XML(data.xml)文件范例

<?xml version="1.0"?>
<root>
<picture>
<src>images/1.jpg</src>
<title>名稱1</title>
<content>描述1</content>
</picture>
<picture>
<src>images/2.jpg</src>
<title>名稱2</title>
<content>描述2</content>
</picture>
</root>

jQuery取第二張圖片的URL

$.ajax({
      url:"data.xml",
      dataType:"xml",
      type:"post",
      success:function(xml){
            alert($(xml).find("src").eq(1).text());
      }
});

當然，直接打開文件是無效，你必須使用http://localhost/xx的形式訪問

還是省地市聯(lián)動例子（速度要比DOM直接處理慢一些）

<select id="sheng"></select>
<select id="shi"></select>
<select id="xian"></select>
<script src="jquery.js"></script>
<script>
$(function(){
    $.ajax({url:"city1.xml",type:"post",dataType:"xml",success:function(msg){
            $(msg).find("Root>Item[pid='0']").each(function(){
                $("<option></option>").text($(this).attr("value")).val($(this).attr("id")).appendTo($("#sheng"));
            });
            $("#sheng").change(function(){
                var id=$(this).val();
                $("#shi").empty();
                $(msg).find("Root>Item[pid='"+id+"']").each(function(){
                    $("<option></option>").text($(this).attr("value")).val($(this).attr("id")).appendTo($("#shi"));
                });
                $("#shi").change();
            });
            $("#shi").change(function(){
                var id=$(this).val();
                $("#xian").empty();
                $(msg).find("Root>Item[pid='"+id+"']").each(function(){
                    $("<option></option>").text($(this).attr("value")).val($(this).attr("id")).appendTo($("#xian"));
                });
            });
            $("#sheng").change();
            $("#shi").change();
        }
    });

});
</script>

下載點這里