我们以前在前端遍历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>
ul>
qweewq>
<a href="#">asda>
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;ivar html_one = get_html;
$.each(data,function(k,v){ //遍历json中的key和value
if(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和value
if(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;jvar cookie_value = new Array();
for(var i=0;i',"'+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; iif(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(/, ");
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(/, ");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/'/g, "\'");
s = s.replace(/"/g, "\"");
s = s.replace(/
/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', //必须为json
data:{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])
}
});最后浏览器中输出的结果为：
