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代码
Mar 07 Javascript
javascript demo 基本技巧
Dec 18 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
Vue程序调试的方法
Jun 17 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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面向对象的方法重载两种版本比较
2008/09/08 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
如何使用php输出时间格式
2013/08/31 PHP
php调用shell的方法
2014/11/05 PHP
thinkphp缓存技术详解
2014/12/09 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
php实现购物车功能(下)
2016/01/05 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Python descriptor(描述符)的实现
2020/11/15 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
保安员岗位职责
2013/11/17 职场文书
优秀班集体申报材料
2014/12/25 职场文书