Ajax 如何提交集合到mvc后台

1,前端请求如下



 1   var apply = { CompanyName: $("[name=‘corpName‘]").val(), ContactUser: $("[name=‘contName‘]").val(), Address: $("[name=‘address‘]").val(), Mobile: $("[name=‘phone‘]").val(), MainProducts: $("[name=‘goods‘]").val(), MainProducts: $("[name=‘goods‘]").val(), Remark: $("[name=‘mark‘]").val(), IsMember: $("[name=‘Meber‘]:checked").val() };
 2             var applyDetail = [];
 3             $(‘.Info‘).each(function (index, item) {
 4                 //参会代表
 5                 var DelegateName = $(item).find("[name=‘Name‘]").val();
 6                 //性别
 7                 var Sex = $(item).find("[name=‘Sex‘]").val();
 8                 //职位
 9                 var Post = $(item).find("[name=‘Position‘]").val();
10                 //手机
11                 var Mobile = $(item).find("[name=‘Phone‘]").val();
12                 //邮箱
13                 var EMail = $(item).find("[name=‘Email‘]").val();
14                 //会场
15                 var SiteType = $(item).find("[name=‘SiteType‘]").val();
16                 var detial = { DelegateName: DelegateName, Sex: Sex, Post: Post, Mobile: Mobile, EMail: EMail, SiteType: SiteType };
17
18                 applyDetail.push(detial);
19             });
20             var postData = { applyModel: apply, applyDetail: applyDetail };
21             $.ajax({
22                 url: ‘/ActivityBusiness/[email protected]&SpeciaNo[email protected]‘,
23                 data: JSON.stringify(postData),
24                 dataType: ‘json‘,
25                 contentType: ‘application/json‘,
26                 type: "POST",
27                 // traditional: true,
28                 success: function (res) {
29                     if (res.Success) {
30                         tipDialog(res.Message, 3, res.Code);
31                         top.frames[tabiframeId()].windowload();
32                         closeDialog();
33                     }
34                     else {
35                         tipDialog(res.Message, 3, -1);
36                     }
37
38                 }
39             });


2,注意事项

要设置  contentType: ‘application/json‘

3,效果  如下图

4,总结

时间: 2024-10-11 00:01:20

Ajax 如何提交集合到mvc后台的相关文章

springmvc,通过ajax方式提交页面数据,后台返回json数据中文信息乱码

本人刚开始接触springmvc,项目搭建参照https://my.oschina.net/gaussik/blog/385697.在用IDEA写登录注册的时候,想通过ajax方式提交数据到后台,然后遇到如题所述的乱码问题,然后度娘了好多,终于解决了.废话不多说,直接上代码. 首先是登录页面login.jsp 1 <%-- 2 Created by IntelliJ IDEA. 3 User: PENG027 4 Date: 2016/11/11 5 Time: 15:48 6 To chang

SpringMVC,SpringBoot使用ajax传递对象集合/数组到后台

假设有一个bean名叫TestPOJO. 1.使用ajax从前台传递一个对象数组/集合到后台. 前台ajax写法: var testPOJO=new Array(); //这里组装testPOJO数组 $.ajax({ url:"testController/testPOJOs", data:JSON.stringify(testPOJO), type:"post", dataType:"json", contentType:"appl

ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般注册都需要用户填一个验证码信息(防止机器恶意注册),并且这个验证码会提交到后台去进行比对,若是错了则不会检查其他提交信息而直接返回浏览器端提示验证码错误.若是简单地用form表单直接将数据提交到指定的url,当验证码填写错误的信息返回浏览器端的时候,不可避免整个页面都会重新刷新一次,这是用户所不想要

spring mvc 后台获取不到form提交的参数

在spring mvc 后台一直获取不到 $("#Form").serialize();提交的参数,一直想来想去都找不到原因.无意当中想起自己使用<input type="text" name="name" value="xxx" disabled="true"/>来禁用了.当把这个属性去掉之后,果然就可以获取到参数的值了. 在这里也顺便比较一下,input中属性disabled与readonl

jquery.form.js实现将form提交转为ajax方式提交的使用方法

本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好

EF5(7) 后台使用SelectListItem传值给前台显示Select下拉框;mvc后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式

一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Order控制器,显示订单列表,并且在修改订单的时候,把用户的id 用 select 下拉框显示出来,并且可以提交修改数据   1.1 我们通过比较原始的方法,来把数据 传递到前台后,前台使用  循环来显示 select 并且显示是哪个元素被选中 我们在前台的cshtml中,使用 @model 命令 指定

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

使用ajax后提交事件后禁用按钮,事件执行完毕后,重新启用按钮

一直想做这样的效果,实现的方法虽然不是很好,但效果还是出来了 <script runat="server"> /// <summary> /// 当Button2被点击,实际是Button3触发事件,这样就可以达到提交事件时禁用被提交的按钮效果 /// </summary> protected void Button_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(5

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo