form表单提交FormData数据

代码见https://gitee.com/bladeandmaster/freemarkerDemo

1、第一种直接使用form表单的submit提交

2、第二种采用ajax提交，需要设置contentype:"application/x-www-form-urlencoded"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试form表单提交数组数据</title>
</head>
<body><form id="form" action="getFormData" method="post"><div><input name="ticketCarts[0].count" /><input name="ticketCarts[0].name"/></div><div><input name="ticketCarts[1].count"/><input name="ticketCarts[1].name"/></div><button type="submit">submit直接提交</button><a id="ajaxSubmit">ajax提交</a></form><script type="text/javascript" src="/static/commons/js/jquery.min.js"></script><!--[{"count":1,"name":"aa"},{"count":2,"name":"bb"}]--><script type="text/javascript">$("#ajaxSubmit").click(function(){var serializeArray = $("#form").serializeArray();//数组对象console.info("serializeArray-------------");console.info(serializeArray);$.ajax({type: 'post',url: 'getFormData',data: serializeArray,dataType: 'json',contentype:"application/x-www-form-urlencoded",success: function(jsonData) {console.info("后端返回数据--------");console.info(jsonData);}})});</script>
</body>
</html>

package com.pingan.core.controller;import com.pingan.core.entity.TicketCarts;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
@Slf4j
public class FormDataController {//localhost:8080/formDataView@RequestMapping("/formDataView")public String formDataView(){return "formData";}@RequestMapping("/getFormData")@ResponseBody //application/x-www-form-urlencodedpublic TicketCarts getFormData(TicketCarts ticketCarts){return ticketCarts;}
}

form表单提交FormData数据相关推荐

vue form表单提交动态数据
项目vue-cli搭建需求为:vue页面跳转至第三方的支付页面操作流程为:点击确认按钮时得到得到第三方网页的url和参数信息,以form表单的post方式提交尝试了N种方法,都不可以成功完成逻辑 ...
从页面获取form表单提交的数据
1 使用HttpServletRequest,方便灵活页面代码,使用action提交一个表单,里边有球的id,球的主人,球的颜色,所在省份,区域 <form action="ball ...
Form表单提交JSON数据
1.定义方法 //定义serializeObject方法,序列化表单 $.fn.serializeObject = function() {var o = {};var a = this.serial ...
web手动进行Form表单提交
最近的一个项目涉及到多文件上传,同时还不让用Form表单提交其他数据.蛋疼... 想到一个办法就是,先用ajax提交数据,然后返回数据库的id主键(mysql数据库),然后再js回调函数中进行表单文件 ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
ajax 模拟表单提交,Ajax模拟Form表单提交，含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
form表单提交数据的同时上传文件代码示例
form表单提交数据的同时在表单中上传文件代码示例一.定义页面注意:在form表单中加入属性 enctype="multipart/form-data" 表示此表单支持文件上 ...
layui删除后刷新表格_layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格table.reload(); HTML form表单菜单:  JS $(function () { //注意:这里是数据表格的加载数据,必须写 ...
php form表单提交方式,form表单提交数据的几种方式
一.submit提交一般表单提交通过type=submit实现,input type="submit",浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url. ...

form表单提交FormData数据

form表单提交FormData数据相关推荐

最新文章

热门文章