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>

    效果图:
     
    完整示例下载

  • 相关阅读:
    什么是高可用性(High Availability)?
    Programer's Tools
    dotnetcore 站点搭建实践
    Nginx使用总结
    小程序开发工具一直登陆不上,提示网络失败
    前端页面JS和CSS以及图片加载nginx报错:net::ERR_CONTENT_LENGTH_MISMATCH的解决与检查
    angualrjs添加ngTouch
    H5自定义金额键盘,改良后ios体验效果流畅
    js生成带有logo的二维码并保存成图片下载
    模仿input闪烁光标
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3957757.html
Copyright © 2011-2022 走看看