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 ********************************************** ...
随机推荐
- Codeforces 917B MADMAX (DP+博弈)
<题目链接> 题目大意:给定一个DAG图,其中图的边权是给定的字符所对应的ascii码,现在A先手,B后手,每次沿DAG图走一步,但是第i次走的边权一定要大于等于第i-1次走的边权(这里是 ...
- 吴裕雄 python 机器学习——等度量映射Isomap降维模型
# -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as plt from sklearn import datas ...
- P3628 [APIO2010]特别行动队
\(\color{#0066ff}{ 题目描述 }\) 你有一支由 \(n\) 名预备役士兵组成的部队,士兵从 \(1\) 到 \(n\) 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑 ...
- storm本地可以运行集群出错遇到的问题
storm本地运行和集群运行是存在区别的: 本地可以读取本地文件系统及java项目中的文件,但是提交集群后就不能读取了,storm只是将topology提交到了集群,所以只能在main方法中将需要读取 ...
- 在SQLSERVER中创建聚集索引
CREATE CLUSTERED INDEX CLUSTER_id ON TABLE_name(ID)------批量
- [转载]sscanf函数
来源:http://c.biancheng.net/cpp/html/296.html 头文件:#include <stdio.h> sscanf()函数用于从字符串中读取指定格式的数据, ...
- CentOS快速搭建FTP(初级-四步)
部署FTP,如果之前没有搭建过,刚开始找资料的时候网上各种各样的复杂参数配置,看的头晕,这里就把最核心的部分展示出来. 1.安装 vsftpd yum install -y vsftpd 2.如果是默 ...
- Python 初识爬虫-**机场出港业务
# -*- coding:utf-8 -*- from lxml import etree import requests ##先进单页测试,然后在进行多页循环 没有解决的问题,动态解决最大页数,目前 ...
- CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
- mybatis-Plus 增强版用法收藏
转载:http://www.cnblogs.com/okong/p/mybatis-plus-guide-one.html#xml%E5%BD%A2%E5%BC%8F https://blog.csd ...