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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
微信小程序实现人脸识别
May 25 Javascript
详解vue v-model
Aug 31 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编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
PHP 裁剪图片
2021/03/09 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
python字符串的拼接方法总结
2019/11/18 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Python中内建模块collections如何使用
2020/05/27 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
高中生学习总结的自我评价范文
2013/10/13 职场文书
大学生简单自荐信
2013/11/10 职场文书
骨干教师培训感言
2014/01/16 职场文书
中学生校园广播稿
2014/01/16 职场文书
求职简历中自我评价
2014/01/28 职场文书
花店创业计划书范文
2014/02/07 职场文书
洗车工岗位职责
2014/03/15 职场文书
高中班主任心得体会
2016/01/07 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS