jQuery处理json数据返回数组和输出的方法


Posted in Javascript onMarch 11, 2015

本文实例讲述了jQuery处理json数据返回数组和输出的方法。分享给大家供大家参考。具体实现方法如下:

/*print the json object

 *

 *$("selector").print_r_json(json,opts) : return formatted string (and print)

 *sprint_r_json : just return the string;

 *print_r_json : return the formatted string and print json data

 *contribute 明河

 *

 *auth iorichina

 *

 *example: 

 *3 ways to use it

 *<script language="javascript">

 *$("selector").print_r_json({"a":"aa","d":{"ef":{"a":"d","d":["a","b"]},"ed":"dd"},"g":"g"},{if_print:true,return_array:true});

 *document.write($.sprint_r_json({"a":"aa","d":{"ef":{"a":"d","d":["a","b"]},"ed":"dd"},"g":"g"}));

 *$.print_r_json({"a":"aa","d":{"ef":{"a":"d","d":["a","b"]},"ed":"dd"},"g":"g"});

 *</script>

 *

*/

$.fn.print_r_json = function(json,options){

    if(typeof(json)!="object") return false;

    var opts = $.extend({},$.fn.print_r_json.defaults,options);

    var data = '';

    if(opts.if_print)

    {

        data = $.sprint_r_json(json)

        $(this).html('<div style="font-weight:bold">'+(opts.return_array?'Array':'JSON-DATA')+'</div>'+data);

    }

    if(opts.array)

    {

        return $.json_to_array(json);

    }

    return data;

};

$.fn.print_r_json.defaults = 

{

    if_print : false,//if print or just return formatted string

    return_array : true //return an Array 

};

$.extend({

    print_r_json : function(json)

    {

        if(typeof(json)=="object")

        {

            var text='<div style="font-weight:bold;">{</div><div style="margin-left:25px;">';

          document.write('<div style="font-weight:bold;">{</div><div style="margin-left:25px;">');

          for(var p in json)

          {

            if(typeof(json[p])=="object")

            {

              document.write('<div>["'+p+'"] => ');

                text+='<div>["'+p+'"] => '+$.print_r_json(json[p])+'</div>';

              document.write('</div>');

            }

            else

            {

                text+='<div>['+((/^\d+$/).test(p)?p:('"'+p+'"'))+'] => "'+json[p]+'"</div>';

              document.write('<div>['+p+'] => '+json[p]+'</div>');

            }

          }  

          text+='</div><div style="font-weight:bold;">}</div>';

          document.write('</div><div style="font-weight:bold;">}</div>');

          return (text);

        }

        else

        {

            document.write(json);

            return (json);

        }

    },

    sprint_r_json : function(json)

    {

        if(typeof(json)=="object")

        {

          var text = '<div style="font-weight:bold;">{</div><div style="margin-left:25px;">';

          for(var p in json)

          {

            if(typeof(json[p])=="object")

            {

              text += '<div>["'+p+'"] => '+$.sprint_r_json(json[p])+'</div>';

            }

            else

            {

              text += '<div>['+((/^\d+$/).test(p)?p:('"'+p+'"'))+'] => "'+json[p]+'"</div>';

            }

          }  

          text += '</div><div style="font-weight:bold;">}</div>';

          return (text);

        }

        else

        {

            return (json);

        }

    },

    json_to_array : function(json)

    {

        if(typeof(json)=="object")

        {

          var text = new Array();

          for(var p in json)

          {

            if(typeof(json[p])=="object")

            {

              text[p] = $.json_to_array(json[p]);

            }

            else

            {

              text[p] = json[p];

            }

          }

          return (text);

        }

        else

        {

            return (json);

        }

    }

});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
jquery实现表格本地排序的方法
Mar 11 #Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 #Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 #Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 #Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 #Javascript
JavaScript前补零操作实例
Mar 11 #Javascript
JavaScript限定图片显示大小的方法
Mar 11 #Javascript
You might like
php gzip压缩输出的实现方法
2013/04/27 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python全栈知识点总结
2019/07/01 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
班班通校本培训方案
2014/03/12 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
临时租车协议范本
2014/09/23 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Python实现天气查询软件
2021/06/07 Python