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 26 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
javascript中indexOf技术详解
May 07 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
详解vue 命名视图
Aug 14 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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP音乐采集(部分代码)
2007/02/14 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
yy生日主持词
2014/03/20 职场文书
通知函的格式
2015/04/27 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
Python保存并浏览用户的历史记录
2022/04/29 Python