Ajax提交表单数据(包含文件)
1. 表单数据->JSON->后台
2. 表单序列化【方式一】
jquery.serializejson.js
<script src="/js/jquery.serializejson.js"></script>
<script>
$('#btnRegister').click(function(){
console.log(JSON.stringify($('#form1').serializeJSON()))
$.ajax({
type: 'post',
url: '/loginPro',
contentType:'application/json;charset=utf-8',
async: true,
//设置验证方式,设置请求头
data: $('#form1').serializeJSON(),
success: function (result) {
},
error: function () {
console.log('error')
}
});
}) </script>
3. 使用FormData类
//表单提交
var formData = new FormData($('#addUserForm')[0])
console.log(formData)
$.ajax({
url:'/user/addPro.do',
type:'post',
data:formData,
contentType: false, //必须
processData: false, //必须
success:function (result) { },error:function () { }
});
在上面的js代码中,我们使用Jquery的ajax方法来提交数据。
注意:应该使用较新的Jquery,老版本的可能不支持,同时必须设置contentType : false和processData : false。否则,jquery会报“Uncaught TypeError: Illegal invocation”这样的错误。因为jquery会试图将不是字符串的内容进行转换,设置processData : false禁止其转换,设置contentType : false是告诉jquery不要为其设置Content-Type头,防止上传失败。
注意:对于springmvc的后台,需要配置视图解析器,否则文件为null:
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize">
<value>102400</value>
</property>
<property name="defaultEncoding">
<value>utf-8</value>
</property>
</bean>
4. string <-->Object
var str = '{"name":"admin","age":20}';
var obj = eval('('+str+')'); //方式一 //方式二,注意 JSON字符串的引号必须使用 "
var obj = JSON.parse(str)
Ajax提交表单数据(包含文件)的更多相关文章
- 通过jQuery Ajax提交表单数据时同时上传附件
1.使用场景:需要使用ajax提交表单,但是提交的表单里含有附件上传 2.代码实现方式: <!-- HTML代码 --> <form method="post" ...
- jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
- Ajax 提交表单【包括文件上传】
利用js插件实现 <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></ ...
- ajax同时提交表单且包含文件
说明一下:FormData对象是html5的一个对象,目前的一些主流的浏览器都已经兼容.ie8暂时不支持,不支持FormData的,可以使用方法二,下面会介绍.接着说FormData,它是一个html ...
- 通过ajax提交表单上传文件
//这是看的大神的.//原地址:https://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html $("#sub" ...
- AJax提交表单数据到后台springmvc接收
第一种方法直接用serialize()方法 function insert(){ $.ajax({ type:"POST", url:"${pageContext.req ...
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- Spring Boot(三):RestTemplate提交表单数据的三种方法
http://blog.csdn.net/yiifaa/article/details/77939282 ********************************************** ...
随机推荐
- [Study notes] To programing RGBD-SLAM together from Gaoxiang
Solve CMake Error in CMakeLists.txt (FIND_PAKAGE): CMake Error at src/CMakeLists.txt:5 (FIND_PACKAGE ...
- Vue Study [2]: Vue Router
Description The article for vue router. Original post link:https://www.cnblogs.com/markjiang7m2/p/10 ...
- Elaxia的路线
Elaxia的路线 求无向图中,两对点间最短路的最长公共路径. 四遍spfa标出每条边的标记,然后用拓扑排序跑dp即可. exp:拓扑排序可以跑DAG上的dp. #include <cstdio ...
- cuda by example
int offset= x+y*dim x 线程块内的线程索引 y 线程块索引 dim 线程块的维度 tid = threadIdx.x+blockIdx.x*blockDim.x 计算大于或 ...
- Necklace of Beads POJ - 1286
\(\color{#0066ff}{ 题目描述 }\) 一个圈上有n个珠子,有三种颜色可以染,问本质不同的方案数(通过旋转和翻转重合的算一种) \(\color{#0066ff}{输入格式}\) 多组 ...
- SP1811 LCS - Longest Common Substring
\(\color{#0066ff}{ 题目描述 }\) 输入2 个长度不大于250000的字符串,输出这2 个字符串的最长公共子串.如果没有公共子串则输出0 . \(\color{#0066ff}{输 ...
- 当我们谈论CloudTable时究竟在谈论什么?
表格存储服务(CloudTable Service,简称CloudTable)是基于Apache HBase提供的分布式.可伸缩.全托管的毫秒级NoSQL数据存储服务.它提供了毫秒级的随机读写能力,适 ...
- springboot开发环境搭建
姓名:陈中娇 班级:软件151 第一步:在Eclipse下面配置Maven环境: 一.使用spring boot新建maven工程不在需要建立maven web工程,只要一般的maven工程就好了 ...
- P3613 睡觉困难综合征(码力)
Luogu3613 实现细节较多,详见代码 #include<cstdio> #include<iostream> #include<cstring> #inclu ...
- 如何从GAC中复制DLL文件
运行执行:c:\Windows\assembly\gac_msil