热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JSAJAX传递List数组到后台(对象)

今天在写代码的时候,碰到的问题,百度了一下,发现原来AJAX传递List数据是可以的,之前还一直用JSON序列化࿰

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

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

另外的方式 数组模式

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

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

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

1 function save() {
2 var data &#61; {};
3 //规则数
4 var ruleObj &#61; $("#rule_container tbody tr");
5 ruleObj.each(function (i) {
6 var full &#61; parseFloat($(this).find("[name&#61;rule_full]").val());
7 var cash &#61; 0;
8 var isPinkage &#61; "False";
9 var sortID &#61; i &#43; 1;
10 data["CouponActivityRules[" &#43; i &#43; "].Full"] &#61; full;
11 data["CouponActivityRules[" &#43; i &#43; "].Coupon"] &#61; cash;
12 data["CouponActivityRules[" &#43; i &#43; "].IsPinkage"] &#61; isPinkage;
13 data["CouponActivityRules[" &#43; i &#43; "].SortID"] &#61; sortID;
14 //ruleArr.push({ Full: full, Coupon: cash, IsPinkage: isPinkage, SortID: sortID });
15 })
16
17 var productArr &#61; new Array();
18 for (var i &#61; 0; i ) {
19 data["CouponProducts[" &#43; i &#43; "].ProductID"] &#61; productSelectData[i].ID;
20 //productArr.push({ ProductID: productSelectData[i].ID });
21 }
22 data["Name"] &#61; $("#Name").val();
23 data["BeginTime"] &#61; $("#BeginTime").val();
24 data["EndTime"] &#61; $("#EndTime").val();
25 data["ID"] &#61; $("#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 &#61; null }//AJAX请求
34 });
35 }

传参

 

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

1

数组传递判别

 

 

 



推荐阅读
  • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现面部交换功能,包括基本原理和具体实现步骤。 ... [详细]
  • MySQL初级篇——字符串、日期时间、流程控制函数的相关应用
    文章目录:1.字符串函数2.日期时间函数2.1获取日期时间2.2日期与时间戳的转换2.3获取年月日、时分秒、星期数、天数等函数2.4时间和秒钟的转换2. ... [详细]
  • 机器学习算法:SVM(支持向量机)
    SVM算法(SupportVectorMachine,支持向量机)的核心思想有2点:1、如果数据线性可分,那么基于最大间隔的方式来确定超平面,以确保全局最优, ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ... [详细]
  • 微信公众号推送模板40036问题
    返回码错误码描述说明40001invalidcredential不合法的调用凭证40002invalidgrant_type不合法的grant_type40003invalidop ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog,包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
author-avatar
黑铁1988
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有