首页 web前端 js教程 jquery怎么遍历出从后台取得list集合?

jquery怎么遍历出从后台取得list集合?

Jun 17, 2017 am 09:53 AM
jquery 后台 怎么 遍历

项目中jquery从后台取得list,是怎么遍历出来的?

一般情况下,后台的list应该是转成了json字符串,返回到了ajax的回调函数里。在回调函数里可以直接操作该json字符串。

举个例子:

$.post("test.php", { name: "John", time: "2pm" },
登录后复制
function(data){
  //可以在这儿循环,比如:
  var listNow=data.listHouTai;//取list。listHouTai是你后台定义的json名称
  for ( var i = 0; i < listNow.length; i++) { 
       var id = vos[i].Id;//可以取list中第一个对象的id值,其他的类推
  }         
});
登录后复制

可以来一个jQuery自定义数组操作类js外部文件,前提需要引入jQuery类库。封装类代码如下:

(function ($) {
    $.List = function () {
        var _list = new Array();
        //外部为数组赋值
        this.GetDataSource = function (arr) {
            if (IsArrayType(arr)) {
                _list = arr;
            } else {
                alert("指定元素非数组类型,赋值失败!");
            }
        };
        //添加一个元素
        this.Add = function (arg) {
            if (arg) {
                _list.push(arg);
            } else {
                alert("参数错误,添加元素失败!");
            }
            return _list;
        };
        //删除指定索引的元素
        this.RemoveAt = function (index) {
            if (IsArrayIndex(index) && index < _list.length) {
                var i;
                var arr = new Array();
                for (i = 0; i < _list.length; i++) {
                    if (i != index) {
                        arr.push(_list[i]);
                    }
                }
                _list = arr;
                return _list;
            }
            else {
                alert("未获取到设置对象的实例,删除元素失败!");
            }
        };
        //按照指定的分割符显示出所有元素
        this.Split = function (arg) {
            arg = arg || ",";
            var i, res;
            res = "";
            if (_list.length > 0) {
                for (i = 0; i < _list.length; i++) {
                    res += _list[i].toString() + arg;
                }
                return res.substr(0, (res.length - arg.toString().length));
            } else {
                return "";
            }
        };
        //外部调用直接返回当前数组实力
        this.ToArray = function () {
            return _list;
        };
        //设置指定索引处的值为指定值
        this.Update = function (index, value) {
            if (IsArrayIndex(index) && index < _list.length) {
                _list[index] = value;
            }
            return _list;
        };
        //清空所有元素
        this.RemoveAll = function () {
            _list.splice(0, _list.length);
            return _list;
        };
        //根据传入的值获取第一次出现在数组中的下标
        this.IndexOf = function (value) {
            if (value) {
                var i;
                for (i = 0; i < _list.length; i++) {
                    if (_list[i] == value) {
                        return i;
                    }
                }
            }
            return -1;
        };
        //获取数组长度
        this.Size = function () {
            return _list.length;
        };
        //移除数组中重复的项
        this.RemoveRepeat = function () {
            _list.sort();
            var rs = [];
            var cr = false;
            for (var i = 0; i < _list.length; i++) {
                if (!cr)
                    cr = _list[i];
                else if (cr == _list[i])
                    rs[rs.length] = i;
                else
                    cr = _list[i];
            }
            for (var i = rs.length - 1; i >= 0; i--)
                this.RemoveAt(rs[i]);
            return _list;
        };
        //对数字数组元素排序,参数:0升序1降序
        this.SortNumber = function (f) {
            if (!f) f = 0;
            if (f == 1) return _list.sort(function (a, b) { return b - a; });
            return _list.sort(function (a, b) { return a - b; });
        };

        //私有方法
        //判断正确的数组下标
        function IsArrayIndex(index) {
            var reg = /^\d+$/;
            if (reg.test(index))
                return true;
            else
                return false;
        }
        //判断当前对象是否为数组对象
        function IsArrayType(arr) {
            if (typeof arr == &#39;object&#39; && typeof arr.length == &#39;number&#39;)
                return true;
            else
                return false;
        }
    }; //结束List的构造方法

})(jquery);
登录后复制

页面调用时需要引入两个js文件:

<script src="js/jquery-1.8.3.min.js" type="text/JavaScript"></script>
<script src="js/jquery.array.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function () {
            var myList = new $.List();
            myList.Add(1);
            myList.Add("1906-07-08");
            myList.Add("hellow world");
            myList.RemoveAt(0);
            myList.Update(0, "11111111");
            //alert("数组被修改内容后的结果:" + myList.Split("|"));
            myList.RemoveAll();
            var arr = myList.ToArray();
            //alert("数组全部被删除后结果:" + arr);
            //alert("数组1当前长度:" + myList.Size());
            var myList2 = new $.List();
            myList2.Add(3);
            myList2.Add(1);
            myList2.Add(45);
            myList2.Add(21);
            myList2.Add(-9);
            myList2.Add(1);
            alert("第二个实例数组结果:" + myList2.ToArray());
            myList2.RemoveRepeat();
            alert("去重后第二个实例数组结果:" + myList2.ToArray());
            alert("去重后第二个实例数组长度:" + myList2.Size());
            myList2.SortNumber(1);
            alert("排序后的数组:" + myList2.ToArray());
            var arr3 = ["aaa", "bbb", "ccc", "ddd", "eee"];
            var arr4;
            myList2.GetDataSource(arr3);
            alert("重新赋值后结果:"+myList2.ToArray());
        });
    </script>
登录后复制

对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object)。本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)

1.jquery遍历对象

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document < /TITLE>
  <script language="javascript" type="text/javascript " src="jquery.min.js "></script>
  <script  type="text / javascript ">
     $(function(){
       var tbody = "";    
    //------------遍历对象 .each的使用-------------
    
    var obj =[{"name ":"项海军","password ":"123456 "}];
   $("#result ").html("------------遍历对象.each的使用-------------");
      alert(obj);//是个object元素
   //下面使用each进行遍历
   $.each(obj,function(n,value) { 
           alert(n+&#39; &#39;+value);
           var trs = "";
             trs += " < tr > <td > " + value.name +" < /td> <td>" + value.password +"</td > </tr>";
             tbody += trs;       
           });
         $("#project").append(tbody);
     
  });
  </script > </HEAD>
 
 <BODY>
     <div id="result" style="font-size:16px;color:red;"></div > <table cellpadding = 5 cellspacing = 1 width = 620 id = "project"border = "1" > <tr > <th > 用户名 < /th>
                <th>密码</th > </tr>             
     </table > </BODY>
</HTML >
登录后复制

2.jQuery遍历数组

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document < /TITLE>
  <script language="javascript" type="text/javascript " src="jquery.min.js "></script>
  <script  type="text / javascript ">
     $(function(){
       var tbody = "";
    
     //------------遍历数组 .each的使用-------------
           var anArray = [&#39;one&#39;,&#39;two&#39;,&#39;three&#39;];
     $("#result ").html("------------遍历数组.each的使用-------------");
           $.each(anArray,function(n,value) {
           
            alert(n+&#39; &#39;+value);
           var trs = "";
             trs += " < tr > <td > " +value+" < /td></tr > ";
              tbody += trs;
            });
          $("#project ").append(tbody);
     
  });
  </script>
 </HEAD>
 
 <BODY>
    ------------此部分同1中的body部分--------------------
 </BODY>
</HTML>
3.jQuery 遍历List集合(其实与遍历一个对象没有太大区别,只是格式上的问题)
<!DOCTYPE HTML PUBLIC " - //W3C//DTD HTML 4.0 Transitional//EN">
< HTML > <HEAD > <TITLE > New Document < /TITLE>
  <script language="javascript" type="text/javascript " src="jquery.min.js "></script>
  <script  type="text / javascript ">
     $(function(){
       var tbody = "";
    
     //------------遍历List集合 .each的使用-------------
      var obj =[{"name ":"项海军","password ":"123456 "},{"name ":"科比","password ":"333333 "}];
    $("#result ").html("遍历List集合.each的使用");
      alert(obj);//是个object元素
   //下面使用each进行遍历
   $.each(obj,function(n,value) { 
           alert(n+&#39; &#39;+value);
       var trs = "";
             trs += " < tr > <td > " +value.name+" < /td> <td>" + value.password +"</td > </tr>";
             tbody += trs;       
           });
         $("#project").append(tbody);
     
  });
  </script > </HEAD>
 
 <BODY>
       ------------此部分同1中的body部分--------------------
 </BODY >
</HTML>
登录后复制

   

以上是jquery怎么遍历出从后台取得list集合?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Discuz后台登录问题解决方法大揭秘 Discuz后台登录问题解决方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz后台登录问题解决方法大揭秘,需要具体代码示例随着互联网的快速发展,网站建设变得越来越普遍,而Discuz作为一款常用的论坛建站系统,受到了许多站长的青睐。然而,正是因为其功能强大,有时候我们在使用Discuz的过程中会遇到一些问题,比如后台登录问题。今天,我们就来大揭秘Discuz后台登录问题的解决方法,并且提供具体的代码示例,希望能帮助到有需要

WordPress后台乱码烦恼?试试这些解决方案 WordPress后台乱码烦恼?试试这些解决方案 Mar 05, 2024 pm 09:27 PM

WordPress后台乱码烦恼?试试这些解决方案,需要具体代码示例随着WordPress在网站建设中的广泛应用,许多用户可能会遇到WordPress后台乱码的问题。这种问题会导致后台管理界面显示乱码,给用户的使用带来极大困扰。本文将介绍一些常见的解决方案,帮助用户解决WordPress后台乱码的烦恼。修改wp-config.php文件打开wp-config.

Java如何遍历文件夹并获取所有文件名 Java如何遍历文件夹并获取所有文件名 Mar 29, 2024 pm 01:24 PM

Java是一种流行的编程语言,具有强大的文件处理功能。在Java中,遍历文件夹并获取所有文件名是一种常见的操作,可以帮助我们快速定位和处理特定目录下的文件。本文将介绍如何在Java中实现遍历文件夹并获取所有文件名的方法,并提供具体的代码示例。1.使用递归方法遍历文件夹我们可以使用递归方法来遍历文件夹,递归方法是一种自身调用自身的方式,可以有效地遍历文件夹中

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u

如何辨别耐克鞋子的真假鞋盒(掌握一招轻松识别) 如何辨别耐克鞋子的真假鞋盒(掌握一招轻松识别) Sep 02, 2024 pm 04:11 PM

耐克作为全球知名的运动品牌,其鞋子备受瞩目。然而,市场上也存在大量的假冒伪劣商品,其中就包括假冒的耐克鞋盒。辨别真假鞋盒对于保护消费者的权益至关重要。本文将为您提供一些简单而有效的方法,以帮助您辨别真假鞋盒。一:外包装标题通过观察耐克鞋盒的外包装,可以发现许多细微的差异。真正的耐克鞋盒通常具有高品质的纸质材料,手感光滑,且没有明显的刺激性气味。正品鞋盒上的字体和标志通常清晰、精细,并且没有模糊或颜色不协调的情况。二:LOGO烫金标题耐克鞋盒上的LOGO通常是烫金工艺,真品鞋盒上的烫金部分会呈现出

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题:jQuery小技巧:快速修改页面所有a标签的文本在网页开发中,我们经常需要对页面中的元素进行修改和操作。在使用jQuery时,有时候需要一次性修改页面中所有a标签的文本内容,这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本,同时给出具体的代码示例。首先,我们需要引入jQuery库文件,确保在页面中引入了以下代码:&lt

使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题:使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库,被广泛用于处理DOM操作。在网页开发中,经常会遇到需要修改页面上链接标签(a标签)的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标,并提供具体的代码示例。首先,我们需要在页面中引入jQuery库。在HTML文件中添加以下代码:

Discuz后台登录失败?教你轻松解决! Discuz后台登录失败?教你轻松解决! Mar 02, 2024 pm 06:03 PM

Discuz后台登录失败?教你轻松解决!随着Discuz作为一款流行的论坛平台,在网站搭建和管理中被广泛使用,有时会遇到后台登录失败的情况,让人感到困扰。今天我们就来讨论一下可能导致Discuz后台登录失败的问题,并提供一些解决方案,也会附上具体的代码示例。希望本文能帮助到遇到类似问题的网站管理员和开发者。1.问题排查在解决Discuz后台登录失败的问题之

See all articles