jQuery- Ajax- Ajax 3338 0

jquery遍历ajax返回的json数据

作者:codercwm

我们以前在前端遍历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和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;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',         //必须为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])
        }
    });

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

发表评论

0个评论

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

提示x

jQuery知识库已成功保存至我的图谱现在你可以用它来管理自己的知识内容了

删除图谱提示×

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示×

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示×

你确定要删除该知识节点吗?