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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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
域名查询代码公布
2006/10/09 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
javascript 精粹笔记
2010/05/09 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python数据持久化shelve模块用法分析
2018/06/29 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
市政管理求职信范文
2014/05/07 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
实践论读书笔记
2015/06/29 职场文书
感恩教育主题班会
2015/08/12 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
Oracle中update和select 关联操作
2022/01/18 Oracle