zoukankan      html  css  js  c++  java
  • 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文档中的内容。

  • 相关阅读:
    上传图片至fastdfs显示连接超时
    Linux上安装maven
    multipartFile.getOriginalFilename();不能获取原文件名称,也就是含有路径名
    /usr/bin/ld: cannot find -lfdfsclient
    linux开放22端口
    Ajax上传file出现的bad request问题
    easyui combobox实现下拉自动提示补全功能
    js格式化时间
    codeforces 780B
    codeforces 61 D 115 A
  • 原文地址:https://www.cnblogs.com/wgl1995/p/6243807.html
Copyright © 2011-2022 走看看