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

    原文地址:http://www.blogjava.net/sxyx2008/archive/2010/07/10/325719.html

    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>

    效果图:

  • 相关阅读:
    iOS 网络编程:socket
    Zsh和Bash,究竟有何不同
    关于微软win10 2004的更新以及wsl2 Ubuntu18.04安装
    C# 委托事件机制 订阅发布
    关于Docker理念和安装,对Visual Studio2019自带生成的DockerFile配置,以及Docker镜像的发布与拉取
    div弹框
    vs分页
    ado显示下拉
    SQL server动态拼接存储过程分页
    退役
  • 原文地址:https://www.cnblogs.com/kailing-con/p/4269444.html
Copyright © 2011-2022 走看看