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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
js实现select跳转功能代码
Oct 22 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
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 图片上传代码
2011/09/13 PHP
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
python基础教程之常用运算符
2014/08/29 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
python如何实现反向迭代
2018/03/20 Python
python print出共轭复数的方法详解
2019/06/25 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python判断链表是否有环的实例代码
2020/01/31 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
部队党性分析材料
2014/02/16 职场文书
财产保全担保书范文
2014/04/01 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Django与数据库交互的实现
2021/06/03 Python
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript