JQuery解析HTML、JSON和XML实例详解


Posted in Javascript onMarch 29, 2014

1、HTML

有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中。

fragment.html文件,其内容:

<div>hello Jquery</div>

在主页面
Test.html中解析代码

$("#a1").click(function(){  

   $("#div2").load('fragment.html');  

   return false;  

});[code]
2、JSON
JSON文件是test.json,其内容:

[code]

[{"name":"jim","age":"20"},{"name":"lily","age":"18","hobby":["swim","movie"]}]

在主页面
Test.html中解析代码

$("#a2").click(function(){  

        $.getJSON('test.json',function(data){  

            var html = '<table>';  

            $.each(data,function(entryIndex,entry){  

                html += '<tr><td>'+entry.name+'</td><td>'+entry.age+'</td>';  

                if(entry.hobby){  

                    html += '<td>';  

                    $.each(entry.hobby, function(lineindex,line) {  

                        html += line+",";  

                    });  

                    html += '</td>';  

                }  

                  

                html += '</tr>';  

            });  

            html += '</table>';  

            $("#div2").html(html);  

            return false;  

       });  

    }); 

3、XML
XML文件是test.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> 

在主页面
Test.html中解析代码
$("#a3").click(function(){  

        $.get('test.xml',function(data){  

            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+"    "+name+"    "+author+"    "+price+"<br>";  

            });  

            $('#div2').html(s);  

        });  

    }); 

对JQuery解析不同文档做了一个Demo,Test.html的原码是
<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

    <title></title>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

    <script type="text/javascript" src="jquery.js"></script>  

    <script type="text/javascript">  

    

 $(function(){  

    $("#a1").click(function(){  

       $("#div2").load('fragment.html');  

       return false;  

    });  

      

    $("#a2").click(function(){  

        $.getJSON('test.json',function(data){  

            var html = '<table>';  

            $.each(data,function(entryIndex,entry){  

                html += '<tr><td>'+entry.name+'</td><td>'+entry.age+'</td>';  

                if(entry.hobby){  

                    html += '<td>';  

                    $.each(entry.hobby, function(lineindex,line) {  

                        html += line+",";  

                    });  

                    html += '</td>';  

                }  

                  

                html += '</tr>';  

            });  

            html += '</table>';  

            $("#div2").html(html);  

            return false;  

       });  

    });$("#a3").click(function(){  

        $.get('test.xml',function(data){  

            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+"    "+name+"    "+author+"    "+price+"<br>";  

            });  

            $('#div2').html(s);  

        });  

    });  

});   

               

    </script>  

</head>  

<body>  

    <form id="form1" runat="server">  

    <ul id="div1">  

        <li><a id="a1" href="#">show html fragment</a></li>  

        <li><a id="a2" href="#">show json</a></li>  

        <li><a id="a3" href="#">show xml</a></li>  

    </ul>  

        <p>Show Content:</p>  

    <div id ="div2"></div>  

    </form>  

    <div>  

      

</div>  

</body>  

</html> 

利用FireFox浏览器打开该Test.html文件,效果如下

JQuery解析HTML、JSON和XML实例详解

点第一个超链接会在Show Content区域显示新插入的html片段

JQuery解析HTML、JSON和XML实例详解

点第二个超链接,会显示json数据:

JQuery解析HTML、JSON和XML实例详解

点第三个超链接,会显示xml数据:

JQuery解析HTML、JSON和XML实例详解

Javascript 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 #Javascript
javascript修改IMG标签的src问题
Mar 28 #Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 #Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 #Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 #Javascript
js如何调用qq互联api实现第三方登录
Mar 28 #Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 #Javascript
You might like
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php上传excel表格并获取数据
2017/04/27 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python实现查询IP地址所在地
2015/03/29 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
从0开始的Python学习016异常
2019/04/08 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
保安队长职务说明书
2014/02/23 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
七年级话题作文之执着
2019/11/19 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript