zoukankan      html  css  js  c++  java
  • JS AJAX传递List数组到后台(对象)

    今天在写代码的时候,碰到的问题,百度了一下,发现原来AJAX传递List数据是可以的,之前还一直用JSON序列化(new Array()数组设置)进行传值的。

    var _list = {};  //等价于 var _list=new Object();
      
    for (var i = 0; i < 10; i++) {  
        _list["后台controller中的接收名字[" + i + "]"] = 值; //设置对象的key=>value键值对,即类似于a[0]=0的内容塞入对象_list中,对于后台接收来说,就相当于List内容了
    }  
      
    $.ajax({  
        url: '传递的路径',  
        data: _list,  //直接传_list节可以了,相当于  data: { "ids[0]":1,"ids[1]":2 }这种写法
        dataType: "json",  
        type: "POST",  
        success: function (data) {  
            alert('Ok');  
        }  
    });  

    另外的方式 数组模式

    <script>
        var a=[];
    //设置数组模式
        for (var i = 0; i < 10; i++) {
            a[i]=i;
        }
        //var b = $.param(a, true);
        $.ajax({
            url: "/jsaction/edit",
            //data:{"ids":b},这种方式我这里测试获取到的数据个数为0,倒不是为null,也不行
            dataType: "json",
            type: "post",
            data: { "ids": a },//使用这种数组方式的,得加下一句才可以,使用传统方式
            traditional: true,
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    console.log(data[i]);
                }
            }
        })
    </script>

     如果传递的数据中存在列表对象

    //第一种,现在比较喜欢第一种,毕竟和后台写法类似,而且看起来清楚
    var albumsArray = [];
                $("#acAlbums li:not(.add)").each(function (i) {
                    albumsArray[i] = new Object();
                    albumsArray[i].ImageUrl = $(this).find("img").attr("src");
                    albumsArray[i].Url = $(this).find("img").attr("url");
                })
    //第二种
    var albumsArray2 = new Array();
                $("#acAlbums li:not(.add)").each(function (i) {    
                    albumsArray2.push({"ImageUrl":$(this).find("img").attr("src"),
    "Url":$(this).find("img").attr("url")});
                })
    
    $.ajax({
                    data: {
                          MenuListStr: JSON.stringify(eval(albumsArray))//尝试了一下,直接把对象数组传到后台,但是数据为null,也可能方式不对
                          ,MenuListStr2:JSON.stringify(eval(albumsArray2))//第二种方式使用Array对象,json化对象数据,当然这个数据到后台是需要反序列化的
    ...
                    }
    ...})    
    

     如果传递的数据中属性是对象的情况的另一种写法:

     1 function save() {
     2             var data = {};
     3             //规则数
     4             var ruleObj = $("#rule_container tbody tr");
     5             ruleObj.each(function (i) {
     6                 var full = parseFloat($(this).find("[name=rule_full]").val());
     7                 var cash = 0;
     8                 var isPinkage = "False";
     9                 var sortID = i + 1;
    10                 data["CouponActivityRules[" + i + "].Full"] = full;
    11                 data["CouponActivityRules[" + i + "].Coupon"] = cash;
    12                 data["CouponActivityRules[" + i + "].IsPinkage"] = isPinkage;
    13                 data["CouponActivityRules[" + i + "].SortID"] = sortID;
    14                 //ruleArr.push({ Full: full, Coupon: cash, IsPinkage: isPinkage, SortID: sortID });
    15             })
    16 
    17             var productArr = new Array();
    18             for (var i = 0; i < productSelectData.length; i++) {
    19                 data["CouponProducts[" + i + "].ProductID"] = productSelectData[i].ID;
    20                 //productArr.push({ ProductID: productSelectData[i].ID });
    21             }
    22             data["Name"] = $("#Name").val();
    23             data["BeginTime"] = $("#BeginTime").val();
    24             data["EndTime"] = $("#EndTime").val();
    25             data["ID"] = $("#ID").val()
    26             $.ajax({
    27                 url: "/create",
    28                 data: data,
    29                 dataType: "json",
    30                 type: "post",
    31                 success: function (data) {},
    32                 error: function (data) {}, timeout: 15000,//超时
    33                 complete: function (XHR, TS) { XHR = null }//AJAX请求
    34             });
    35         }
    传参

    List传递(非传统请求),数组形式的传法并不被接受,现在只知道一种data["child[0].ID"]=1的写法后台是能够正常接收数据的

     1 <script>
     2     var a = {};
     3     a.Name = "测试";
     4     //a.Child = {};或者a.Child = [];
     5     //for (var i = 0; i < 10; i++) {
     6     //    a.Child[i] = {};
     7     //    a.Child[i].ID = i;
     8     //    a.Child[i].Age = i;
     9     //}这种方式淘汰,传到后台的ID,Age都是0,无值;传统方式也没用
    10 
    11     //for (var i = 0; i < 10; i++) {
    12     //    a["Child[" + i + "]"] = {};
    13     //    a["Child[" + i + "]"].ID = i;
    14     //    a["Child[" + i + "]"].Age = i;
    15     //}这种方式淘汰,传到后台的ID,Age都是0,无值;传统方式也没用
    16 
    17     for (var i = 0; i < 10; i++) {
    18         a["Child[" + i + "].ID"] = i;
    19         a["Child[" + i + "].Age"] = i;
    20     }//这种方式成功,传到后台的ID,Age都是正常的=》即使是ajax加了traditional: true,传统方式传参也可以
    21     function test() {
    22         $.ajax({
    23             url: "/home/test",
    24             data: a,
    25             dataType: "json",
    26             type: "post",
    27             //traditional: true,//开启传统模式
    28             success: function (data) {
    29                 jsprint("正常")
    30             },
    31             error: function () {
    32                 jsprint("异常");
    33             }
    34         })
    35     }
    36 </script>
    数组传递判别

  • 相关阅读:
    让CEF支持FLASH(非安装插件的形式)
    解决SQLServer 2008 日志无法收缩,收缩后大小不改变
    HTML Socket实现 .NET
    JS基础之BOM对象
    JavaScript对象
    JS函数
    JavaScript概述
    CSS块级元素和行内元素
    返回顶部示例
    CSS属性操作二
  • 原文地址:https://www.cnblogs.com/danlis/p/5667243.html
Copyright © 2011-2022 走看看