jQuery之XML的加載和解析


1.XML(eXtensible Markup Language)即可擴展標記語言,與HTML一樣,都是SGML標准通用語言。語法如下:

  • 任何起始標簽都必須有一個結束標簽。
  • 可以采用另一種簡化語法,即在一個標簽中同時表示起始和結束標簽。這種語法是在右邊閉合尖括號之前緊跟一個斜線(/),例如<tag/>。XML解析器會將其翻譯成<tag></tag>。
  • 標簽必須按照合理的順序進行嵌套,因此結束標簽必須按鏡像順序匹配起始標簽。
  • 所有屬性都需要有值,並且需要在值的周圍加上雙引號。

2.Content-Type:很多情況下XML文件不能征程解析都是由於Content-Type沒有設置好。如果Content-Type本身就是一個XML文件則不需要設置;如果是由后台程序動態生成的,那么就需要設置Content-Type為“text/xml”,否則jQuery會以默認的“text/html”方式處理,導致解析失敗,下面介紹幾種常見的語言中Content-Type的設置。

header("Content-Type : text/xml");       //PHP
response.ContentType = "text/xml";      //ASP
response.setContentType("text/xml");   //JSP

3.XML結構:作為一個標准的XML,必須要遵循嚴格的格式規定,其中最重要的一條規則就是XML必須是封閉的。XML文檔只能有一個頂層元素。下面展示一個正確的XML。

<?xml version="1.0" encoding="UTF-8"?>
<stulist>
    <student email="1@1.com">
        <name>zhangsan</name>
        <id>1</id>
    </student>
    <student email="2@2.com">
        <name>lisi</name>
        <id>2</id>
    </student>
</stulist>

4.獲取並解析XML,這里是通過Ajax函數進行讀取。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    </head>
    <body>
        <input type="button" id="getXml" value="獲取和解析xml"/>
        <div id="load"></div>
    </body>
    
    <script type="text/javascript">
        $(function(){
            $("#getXml").click(function(){
                $.ajax({
                    type:"get",
                    url:"file/test.xml",//這里通過設置url屬性來獲取xml
                    dataType:"xml",
                    timeout:1000,      //設定超時
                    cache:false,       //禁用緩存
                    success:function(xml){//這里是解析xml
                        var frag = $("<ul/>");      //建立一個代碼片段
                        $(xml).find("student").each(function(i){
                            var id = $(this).children("id");   //獲取id節點
                            id_value = id.text();              //獲取節點文本
                            email = $(this).attr("email");     //獲取student下的email屬性
                            //構造html字符串,通過append()方法添加到之前建立的代碼段
                            frag.append("<li>姓名:"+id_value+"---郵箱:"+email+"</li>");
                        });
                        frag.appendTo("#load");
                    }
                });
            })
        })
    </script>
</html>

5.效果展示,當我點擊“獲取和解析xml”按鈕時會在一個div里面添加一些html元素,里面的值就是xml文檔中的內容。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM