jquery遍历ajax返回的json数据

我们以前在前端遍历ajax拿到的数据一般都是用for或其他方式遍历,这样做麻烦且费事,效率不高,下面提供一个函数,只需调用函数即可把数据遍历出来,方便高效。

html代码:

<html>
<head><script type="text/javascript" src="./jquery.js"></script>
</head>
<body><qweewq><ul><li>{list.name}</li>   <li>{list.info}</li> <!-- <li>{name}</li><li>{info}</li> --></ul></qweewq><a href="#">asd</a>
</body>
</html>

jquery函数:

/*把josn数据遍历到html页面中author:程威明参数 :dom:包围需要遍历的html内容的标签(名称自定义,尽量复杂,不可跟常用的html标签名相同)data:ajax返回的json数据  (必须由ajax返回且类型为json)    data_type:数据格式(1,2),两种:1:{"status":0,"name":["1","2","3"],"info":["a","b","c"]}2:{"status":0,"list":[{"name":"1","info":"a"},{"name":"2","info":"b"},{"name":"3","info":"c"}]}如果是格式2,html代码中的标识格式必须为{list.name}set_cookie:是否把数据保存到cookie(默认为false,不保存),保存的格式为{"name":[1,2,3],"info":["a","b","c"]}cookie_name:存储cookie的name,若数据类型为1即默认为cookie_json,若数据类型为2即默认为数据列表的key,如上面数据类型例子中的list
*/removeCookie('firstdom');//刷新页面即清除这个cookie$.extend({'eachjson':function(dom,data,data_type,set_cookie,cookie_name){/**-------- 这部分都是为了方便用于ajax分页 ----------------------------**//**- [ajax分页](http://blog.csdn.net/codercwm/article/details/51508848) ---**/if(!getCookie('firstdom'))//把原始的html代码存入cookie{var firstdom = htmlEncode($(dom).html());setCookie('firstdom',firstdom);}if(getCookie('firstdom'))//在cookie中获得{$('qweewq').html(getCookie('firstdom'));}/**--------------------------------------------------**/var get_html = $(dom).html();    //获取自定义标签包围的html内容var json_length = 0;if(data_type==1){var html_s = each_json_data_type1(get_html,json_length,data,set_cookie);        //如果为数据格式为1即调用函数1,否则调用函数2}else{var html_s = each_json_data_type2(get_html,json_length,data,set_cookie);}$(dom).html(html_s);        //把原html替换为已有数据的html}});function each_json_data_type1(get_html,json_length,data,set_cookie,cookie_name)
{if(set_cookie){var cookie_json = JSON.stringify(data).replace(/"status":(.*?),/,'')if(!cookie_name){var cookie_name = 'cookie_json';}setCookie(cookie_name,cookie_json);}for(var check_length in data){if(data[check_length].length>json_length){json_length = data[check_length].length;}}var html_s = '';for(var i=0;i<json_length;i++){var html_one = get_html;$.each(data,function(k,v){        //遍历json中的key和valueif(v[i]){var val = v[i];}else{var val = '';}html_one = html_one.replaceAll('{'+k+'}',val);  //把html中的标识替换为json数据中的内容});html_s += html_one;}return html_s;
}function each_json_data_type2(get_html,json_length,data,set_cookie,_cookie_name)
{/***  作用:例如:把html代码中的{list.name}中的list匹配出来  *******/var preg = /{(.*?)\./;                      var key_list = get_html.match(preg);var key = key_list[1];/*********  end  ********************/json_length = data[key].length;var html_s = '';/*  作用:把key中的数组中的json取出放到对应的地方 *****************/var cookie_val = new Array();var cookie_key = new Array();var m = 0;$.each(data[key],function(index_key,value){var html_one = get_html;var n = 0;cookie_val_one = new Array();$.each(value,function(k,v){        //遍历json数组中的key和valueif(v){var val = v;}else{var val = '';}html_one = html_one.replaceAll('{'+key+'.'+k+'}',val);        //把html中的标识替换为json数据中的内容//把k和v保存到数组中if(set_cookie) {if(i=(json_length-1)){cookie_key[n] = k;}cookie_val_one[n] = v;}n++;});if(set_cookie) cookie_val[m] = cookie_val_one;      //把v保存成二维数组html_s += html_one;m++;});if(set_cookie){var cookie_json = '{';var len = cookie_key.length;for(var j=0;j<len;j++){var cookie_value = new Array();for(var i=0;i<cookie_val.length;i++){cookie_value[i] = cookie_val[i][j];}cookie_json += ',"'+cookie_key[j]+'":'+'["'+cookie_value.join('","')+'"]';}cookie_json += '}';var newstr = cookie_json.split("");newstr[1] = '';     //把第一个‘,’删掉cookie_json = newstr.join("");if(!cookie_name){var cookie_name = key;}setCookie(cookie_name,cookie_json);}/*  end ************************/return html_s;
}//设置或添加cookie
function setCookie(name,value)
{ var str = name + "=" + value;document.cookie = str;
}//获取cookie  
function getCookie(name)
{  //cookie中的数据都是以分号加空格区分开  var arr = document.cookie.split("; ");  for(var i=0; i<arr.length; i++){  if(arr[i].split("=")[0] == name){  return arr[i].split("=")[1];  }}//未找到对应的cookie则返回空字符串  return '';  
}//删除cookie  
function removeCookie(name)
{   document.cookie = name+"=;expires="+(new Date(0)).toGMTString();
}//字符窜替换所有
String.prototype.replaceAll  = function(s1,s2)
{    return this.replace(new RegExp(s1,"gm"),s2);    
}//html字符编码
function    htmlEncode(str)  
{  var s = "";if (str.length == 0) return "";s = str.replace(/&/g, ">");s = s.replace(/</g, "<");s = s.replace(/>/g, ">");s = s.replace(/ /g, " ");s = s.replace(/\'/g, "'");s = s.replace(/\"/g, "");s = s.replace(/\n/g, "");return s;
}  //html字符解码
function    htmlDecode(str)  
{  var s = "";if (str.length == 0) return "";s = str.replace(/>/g, "&");s = s.replace(/</g, "<");s = s.replace(/>/g, ">");s = s.replace(/ /g, " ");s = s.replace(/'/g, "\'");s = s.replace(/"/g, "\"");s = s.replace(/<br>/g, "\n");return s; 
}

test.php中的代码:

<?php
//echo '{"status":0,"name":["aa","bb","cc","dd","ee"],"info":[1,2,3,4,5]}';
echo '{"status":0,"list":[{"name":"1","info":"a"},{"name":"2","info":"b"},{"name":"3","info":"c"}]}';

ajax代码:

$.ajax({url:'http://localhost/test.php',type:'post',dataType:'json',         //必须为jsondata:{data:1},success:function(res){$.eachjson('qweewq',res,2,1); //调用函数(qweewq为包围要遍历的html代码的自定义标签)var aaa = getCookie('cookie_json');       //获取cookie中的数据var bbb = eval("(" + aaa + ")");         //转成json对象$('a').html(bbb.name[0])}});

最后浏览器中输出的结果为:
这里写图片描述

转载于:https://www.cnblogs.com/codercwm/p/10135061.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/373031.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache JMeter:随心所欲进行负载测试

这是有关使用Apache JMeter进行负载测试的第二篇文章&#xff0c;请在此处阅读第一篇文章&#xff1a; 有关对关系数据库进行负载测试的分步教程。 JMeter有很多采样器 。 如果您需要JMeter不提供的采样器&#xff0c;则可以编写自定义采样器。 &#xff08;自定义采样器在JMet…

致敬词

见义勇为致敬词 面对灾难和死神&#xff0c;你们大义凛然、知险而上&#xff0c;把平安和生机留给他人&#xff0c;把困难和危险留给自己。巍巍乎高山景行&#xff0c;铮铮然铁骨侠风&#xff1b;壮志谱传奇&#xff0c;热血写春秋。你们是&#xff1a;百姓英雄&#xff0c;平安…

经常使用计算机的孩子,常玩电脑对孩子负面影响大,家长们不容小觑!

相信不少的家庭都会备有电脑&#xff0c;人们在网络世界里面能够找到自己需要的东西。不仅是大人喜欢玩电脑&#xff0c;小孩也喜欢玩电脑。然而常玩电脑对孩子负面影响大吗&#xff1f;有多大&#xff1f;一、行为问题全国青少年教育协会指出&#xff0c;5岁以下的使用电脑的孩…

VMware下ubuntu与Windows实现文件共享的方法

最近安装caffe需要将Windows下文件拷贝到ubuntu16.04下&#xff0c;就进行了共享文件夹的设置&#xff0c;期间遇到一些困难&#xff0c;记录下来&#xff0c;方便以后遇到此类问题不再困惑。 &#xff08;记录只为更好的分享&#xff09; 言归正传&#xff1a; 1、首先需要在u…

mybatis入门-新手注意问题

参数问题 在映射文件中通过parameterType指定输入参数的类型&#xff1b;在映射文件中通过resultType指定输出结果的类型。 占位符和拼接符问题 #{}表示一个占位符号&#xff0c;#{}接收输入参数&#xff0c;类型可以是简单类型&#xff0c;pojo、hashmap。 如果接收简单类型&a…

远程桌面连接时无法访问远程计算机的计算机属性提示系统调用失败,远程过程调用失败【应对技巧】...

喜欢使用电脑的小伙伴们一般都会遇到win7系统远程过程调用失败的问题&#xff0c;突然遇到win7系统远程过程调用失败的问题就不知道该怎么办了&#xff0c;其实win7系统远程过程调用失败的解决方法非常简单&#xff0c;按照1&#xff1a;第一步我们可以看到sql server数据库出现…

库卡机器人C4计算机无法启动,KUKA-C4标准版机器人启动时序

描述1.T1模式下选择CELL程序&#xff0c;手动执行程序&#xff0c;注意中间路径&#xff0c;有时机器人不在HOME点附近&#xff0c;回原点的过程中需慢速运行&#xff0c;直至到达BCO。2.松开执行键&#xff0c;重新按下&#xff0c;信息栏出现“运行方式错误”提示&#xff0c…

ADF:将UI类别与动态表单一起使用

JDev 11g R2具有有趣的新功能“ UI类别”。 它使我们可以在视图对象定义级别上以声明方式对VO的属性进行分组。 例如&#xff0c;我的VEmployees视图对象的“ UI Categories”选项卡如下所示&#xff1a; 默认情况下&#xff0c;每个视图对象都有一个预定义的类别“默认”。 我…

Exchange超级实用命令行

发现Powershell很强大以后&#xff0c;就欲罢不能了。来点干货 有PST文件的没有成功导出&#xff0c;原因是执行时会报错&#xff0c;说需要64位Outlook&#xff0c;dotnet4.5以上环境。还有说法是Exchange2010开始不支持PST导入导出。 整理了一下最近尝试比较实用的命令&#…

位数不足前面补0mysql语句_全网热议:监控补光灯爆亮闪瞎眼!你遇到过吗?

唔知大家有无咁ga体会每当夜晚揸车经过一排监控补光灯瞬间像“瞎子”那样看不到东西&#xff0c;“威力”堪比远光灯(△ 11月12日晚&#xff0c;安定门外大街&#xff0c;主路上的监控补光灯)近日&#xff0c;“监控补光灯太刺眼&#xff0c;给夜间行车安全造成极大隐患”一事引…

4种常见的 PHP 设计模式

工厂模式 在大型系统中&#xff0c;许多代码依赖于少数几个关键类。需要更改这些类时&#xff0c;可能会出现困难。例如&#xff0c;假设您有一个从文件读取的 User 类。您希望将其更改为从数据库读取的其他类&#xff0c;但是&#xff0c;所有的代码都引用从文件读取的原始类。…

安装卡主_智能温室四周玻璃的安装学问还这么多

智能玻璃温室大棚是指顶部及四周以玻璃为覆盖材料的尖顶温室大棚&#xff0c;玻璃温室大棚这几年的流行是由于纹络型温室顶部阳光板问题的抗老化方面容易出现问题。因此很多客户为了种植获得更高的透光率&#xff0c;更长的使用年限&#xff0c;因而多选择全玻璃温室大棚。那么…

String类详解(1)

首先String是一个类。  1&#xff0c;实例化String类方法。 1&#xff09;直接赋值&#xff1a;String name"haha"; 2)通过关键字&#xff1a;String namenew String("haha"); 2&#xff0c;String类的数据比较。 首先回顾一下&#xff0c;基础数据的比较…

WebApi Post 后台无法获取参数的解决方案

事件回放&#xff1a; 之前一段时间&#xff0c;公司里前端用的Angularjs 发送http请求也是用的ng的组件&#xff0c;后台是.Net的WebApi 前端 var data {PArgs: {PageIndex: 0,PageSize: 8,RowsCount: 0} };$http.post("/Api/Test/ABC", data).success(function (d…

南京大学计算机系周小莉,周会群

媒体报道&#xff1a;南京大学周会群&#xff1a;用计算机聪明地做实验Q《中国教育网络》A周会群Q&#xff1a;南京大学的高性能计算中心非常特殊&#xff0c;分布在物理&#xff0c;化学、天文、地球科学四个不同的学科中&#xff0c;为什么采取这种模式&#xff1f;A&#xf…

不要怂,就是GAN (生成式对抗网络) (五):无约束条件的 GAN 代码与网络的 Graph...

GAN 这个领域发展太快&#xff0c;日新月异&#xff0c;各种 GAN 层出不穷&#xff0c;前几天看到一篇关于 Wasserstein GAN 的文章&#xff0c;讲的很好&#xff0c;在此把它分享出来一起学习&#xff1a;https://zhuanlan.zhihu.com/p/25071913。相比 Wasserstein GAN &#…

用于MyBatis CRUD操作的Spring MVC 3控制器

到目前为止&#xff0c;我们已经为域类“ User ”创建了CRUD数据库服务&#xff0c;并且还将MyBatis配置与Spring Configuration文件集成在一起。 接下来&#xff0c;我们将使用Spring MVC创建一个网页&#xff0c;以使用MyBatis CRUD服务对数据库执行操作。 使用MyBatis 3创建…

2pin接口耳机_拆解报告:雷柏首款真无线耳机XS200

-----我爱音频网拆解报告第185篇-----雷柏是一家历史悠久的鼠标和键盘厂商&#xff0c;截至目前&#xff0c;雷柏(rapoo)总共出了四款耳机&#xff0c;此前曾推出过三款蓝牙耳机&#xff0c; 分别是S500 蓝牙立体声麦克风耳机&#xff0c;S200 蓝牙立体声麦克风耳机&#xff0c…

深入理解javascript原型和闭包(3)——prototype原型

转载&#xff0c;原文地址http://www.cnblogs.com/wangfupeng1988/p/3978131.html 既typeof之后的另一位老朋友&#xff01; prototype也是我们的老朋友&#xff0c;即使不了解的人&#xff0c;也应该都听过它的大名。如果它还是您的新朋友&#xff0c;我估计您也是javascript的…

python 温度 符号_Python通过小实例入门学习---1.0(温度转换)

1.安装Python 3 下载地址: Welcome to Python.org​www.python.org 2.“温度转换”实例:摄氏度--->华氏度 / 华氏度--->摄氏度 TempConvert.py TempStr = input("请输入带有符号的温度值:") if TempStr[-1] in ["f","F"]:C = (eval(Tem…