zoukankan      html  css  js  c++  java
  • 轻松使用jquery解析XML

    xml文件结构:books.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <root>
        <book id="1">
            <name>深入浅出extjs</name>
            <author>张三</author>
            <price>88</price>
        </book>
        <book id="2">
            <name>锋利的jQuery</name>
            <author>李四</author>
            <price>99</price>
        </book>
        <book id="3">
            <name>深入浅出flex</name>
            <author>王五</author>
            <price>108</price>
        </book>
        <book id="4">
            <name>java编程思想</name>
            <author>钱七</author>
            <price>128</price>
        </book>
    </root>

    页面代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jquery解析xml</title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $.post('books.xml',function(data){
                //查找所有的book节点
                var s="";
                $(data).find('book').each(function(i){
                    var id=$(this).attr('id');
                    var name=$(this).children('name').text();
                    var author=$(this).children('author').text();
                    var price=$(this).children('price').text();
                    s+=id+"&nbsp;&nbsp;&nbsp;&nbsp;"+name+"&nbsp;&nbsp;&nbsp;&nbsp;"+author+"&nbsp;&nbsp;&nbsp;&nbsp;"+price+"<br>";
                });
                $('#mydiv').html(s);
            });
        });
    </script>
    </head>
    <body>
        <div id='mydiv'></div>
    </body>
    </html>

    效果图:
     
    完整示例下载

  • 相关阅读:
    Nacos配置管理-什么是配置中心
    MYSQL count
    贷款
    短视频推荐图书
    前端
    err
    err
    Mysql8安装教程
    err
    err
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3957757.html
Copyright © 2011-2022 走看看