Skip to main content
 首页 » 编程设计

jQuery之XML的加载和解析

2022年07月19日177sky-heaven

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文档中的内容。


本文参考链接:https://www.cnblogs.com/wgl1995/p/6243807.html