ajax提交url与ajax提交表单的详细比较_6C社区
ajax提交url与ajax提交表单的详细比较
ajax提交url与ajax提交表单的详细比较
1：ajax自已构造一个url,这种方式传参数要用Data,不能用于表单提交。 例:复制代码 代码如下: function createHtml(id){
$("#reloading").show();
//edit_bg是个div,提交时显示，这样可以使背景页面不能操作。
$("#edit_bg").show();
type:"POST",
url:"pageAction!createHtml.action",
data:"id="+id,
success:function(data){
$("#reloading").hide();
$("#edit_bg").hide();
if(data =="true"){
alert("操作成功。");
alert("操作失败,请联系管理员！");
}//操作成功后的操作
} 2：ajax提交表单，这对于大数据传输非常有用，如用户注册，信息量非常大，用ajax提交表单，页面比较美观 但是，对于ajax提交表单，我们还得引入一个js，即：jquery.form.js" 例：复制代码 代码如下: function uploadFile(){
$("#reloading").show();
$("#edit_bg").show();
//form1为表单名
$("#form1").ajaxSubmit({
type:"POST",
success:function(data){
$("#reloading").hide();
$("#edit_bg").hide();
if(data.indexOf("true")!=-1){
alert("操作成功。");
alert(data);
alert("操作失败,请联系管理员！");
}//操作成功后的操作
} 3: 2项中ajax提交表单虽然可以正确操作，但返回的data数据有问题，页面得不到处理结果。如下的代码对ajax提交表单进行了纠正 复制代码 代码如下: function submitForm(){ $('#form1').ajaxSubmit(ajaxOptionsNew);
var ajaxOptionsNew = {
beforeSubmit : fn_check_form,
success : showResponse,
url : "costAtion!save2.action",
error : function(XMLResponse) {
alert(XMLResponse.responseText);
alert('操作失败！');
// window.location.reload();
}; function fn_check_form(){
if($("#Name").val() == ""){ alert("人不能为空"); $("#Name").focus();
function showResponse(responseText) {
//alert(responseText);
if(responseText == 'true'){
alert('操作成功！');
window.location.reload();
else if(responseText == 'paramFalse')
alert("必填参数不能为空!")
else if(responseText == 'timeError')
alert("出发时间不能大于报销时间!");
alert('操作失败！');
// window.location.reload();
}catch(e){alert(e.message);}
联系QQ： 邮箱：
本文地址： /article-96952-1.shtml 欢迎转载为什么form表单提交没有跨域问题，但ajax提交有跨域问题？ - 知乎300被浏览37028分享邀请回答.结果：ajax请求失败提示cors错误，表单提交后跳转到 百度页面 。分析：其实两次请求的response其实是一样的，status code都是302。但是因为ajax从脚本发起的请求，所以受到了限制，缺少"access-control-allow-origin"的时候被当成错误的处理了。而表单提交不是从脚本发起的请求，所以不受影响，正常重定向到 百度。原理：我也不知道，因为以上都是我编的，实在编不下去了了。随手甩下一段MDN的文档，顺便说一下，所谓的跨域限制，是浏览器拦截了响应而已，其实请求是成功的。 原文：出于安全考虑，浏览器会限制从脚本内发起的跨域HTTP请求。例如， 和 遵循。因此，使用 或
的Web应用程序只能将HTTP请求发送到其自己的域。为了改进Web应用程序，开发人员要求浏览器厂商允许跨域请求。（译者注：这段描述跨域不准确，跨域并非不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从 HTTPS 的域跨域访问 HTTP，比如
Chrome 和 Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。1添加评论分享收藏感谢收起2013年10月 总版技术专家分月排行榜第三
2014年3月 Java大版内专家分月排行榜第一2014年1月 Java大版内专家分月排行榜第一2013年12月 Java大版内专家分月排行榜第一2013年11月 Java大版内专家分月排行榜第一2013年10月 Java大版内专家分月排行榜第一
本帖子已过去太久远了，不再提供回复功能。通过传统的form表单提交的方式上传文件：
&form id= &uploadForm& action= &http://localhost:8080/cfJAX_RS/rest/file/upload& method= &post& enctype =&multipart/form-data&&
&h1 &测试通过Rest接口上传文件 &/h1&
&p &指定文件名： &input type =&text& name=&filename& /&&/p&
&p &上传文件： &input type =&file& name=&file& /&&/p&
&p &关键字1： &input type =&text& name=&keyword& /&&/p&
&p &关键字2： &input type =&text& name=&keyword& /&&/p&
&p &关键字3： &input type =&text& name=&keyword& /&&/p&
&input type =&submit& value=&上传&/&
不过传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。
Ajax的方式进行请求：
url : &http://localhost:8080/STS/rest/user&,
type : &POST&,
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
error : function(data) {
$( '#serverResponse').html(data.status + & : & + data.statusText + & : & + data.responseText);
通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。
通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。
但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。
关于FormData及其用法
FormData是什么呢？我们来看看Mozilla上的介绍。
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的方法来异步的提交这个&表单&.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.&
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
Constructor
FormData()
想得到一个FormData对象：
var&formdata =&new&FormData();
W3c草案提供了三种方案来获取或修改FormData。
方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：
var&formdata =&new&FormData();
formdata.append(&name&,&&呵呵&);
formdata.append(&url&,&&/&);
方案2：取得form元素对象，将它作为参数传入FormData对象中！
var&formobj =& document.getElementById(&form&);
var&formdata =&new&FormData(formobj);
方案3：利用form元素对象的getFormData方法生成它！
var&formobj =& document.getElementById(&form&);
var&formdata = formobj.getFormData()
本方法用于向已存在的键添加新的值，如该键不存在，新建之。
formData.append(name, value);
formData.append(name, value, filename);
注:&通过&方法赋给字段的值若是数字会被自动转换为字符(字段的值可以是一个对象,一个对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).
键 (key)， 对应表单域value
表单域的值filename (optional)
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is &blob&.
将一对键和值从&FormData&对象中删除。
formData.delete(username);
返回给定键的第一个值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username);
返回给定键的所有值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.getAll(username);
检查是否包含给定键，返回&true&或&false
formData.has(username);
设置给定键的值
formData.set(name, value);
formData.set(name, value, filename);
Firfox(Gecko)
Intenet Explorer
Basic support
append with filename
22.0(22.0)
delete, get, getAll, has, set
Behind Flag
Not supported
Not supported
Not supported
Chrome Android
Firfox Mobile (Gecko)
Firfox OS (Gecko)
Opera Mobile
Safari Mobile
Basic support
append with filename
22.0(22.0)
delete, get, getAll, has, set
Not supported
Not supported
Not supported
Not supported
Ajax通过FormData上传文件
1.使用&form&表单初始化FormData对象方式上传文件
id=&uploadForm& enctype=&multipart/form-data&&
id=&file& type=&file& name=&file&/&
id=&upload& type=&button&&upload&
javascript代码
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
这里要注意几点：
processData设置为false。因为data值是FormData对象，不需要对数据做处理。&form&标签添加enctype=&multipart/form-data&属性。cache设置为false，上传文件不需要缓存。contentType设置为false，不设置contentType值，因为是由&form&表单构造的FormData对象，且已经声明了属性enctype=&multipart/form-data&，所以这里设置为false。
上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为&input&中声明的是name=&file&。
如果不是用&form&表单构造FormData对象又该怎么做呢？
2.使用FormData对象添加字段方式上传文件
id=&uploadForm&&
id=&file& type=&file&/&
id=&upload& type=&button&&upload&
这里没有&form&标签，也没有enctype=&multipart/form-data&属性。
javascript代码
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
这里有几处不一样：
append()的第二个参数应是文件对象，即$('#file')[0].files[0]。contentType也要设置为‘false’。
从代码$('#file')[0].files[0]中可以看到一个&input type=&file&&标签能够上传多个文件，
只需要在&input type=&file&&里添加multiple或multiple=&multiple&属性。
3.服务器端读文件
从Servlet 3.0&开始，可以通过&request.getPart()&或&request.getPars()&两个接口获取上传的文件。
转载文章：
本文已收录于以下专栏：
相关文章推荐
一、ajaxFileUpload是一个异步上传文件的jQuery插件。
　　语法：$.ajaxFileUpload([options])
　　options参数说明：
1、url　　　　　　　　　　...
AjaxUpLoad.js的使用实现无刷新文件上传，如图。
图1 文件上传前
图2 文件上传后
1、创建页面并编写HTML
这里就简单介绍下ajaxFileUpload，jQuery插件AjaxFileUpload可以实现ajax文件上传。我们的项目采用的是jsp跟js分离的架构，所以代码如下。
首先是jsp部分：
C#代码上传文件到SharePoint文档库并给字段赋值
在SharePoint产品的各个版本中，文档库一直都是一项重要的存储容器，用来存储大量的文件而设置的。在SharePoint 2010版...
ajax已经很普遍了，但使用 ajax上传文件自己却一直都没有涉及，我只知道挺复杂的，上传文件不同于上传一般的表单数据，必须特殊处理，知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目...
$(&#harg_file&).change(function(){
var fd=new FormData();
fd.append(&file&,$(this).get(0).file...
他的最新文章
讲师：姜飞俊
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
之前一篇文章（）介绍了表单属性enctype的编码类型，今天来讲一讲Ajax方式提交表单时常用的编码类型。
用Ajax方式提交表单，决定编码类型的是请求头中Content-Type，不同的值对应不同的提交和回调处理方式。而且，在项目中我们会用到前端的库或者框架，他们对于不同的Content-Type也有不同的参数写法，本文将以jQuery和AngularJS，加上XMLHttpRequest共三种方式为例，详细介绍不同Content-Type的发送请求的方式。本文考虑的Content-Type类型，共有如下几种：
application/x-www-form-urlencoded
multipart/form-data
text/plain
application/json
下面将介绍XMLHttpRequest、jQuery和AngularJS三种异步提交方式，及对应的每一种Conten-Type类型。
XMLHttpRequest 方式
XMLHttpRequest对象用于向后端收发数据请求，现代浏览器都支持（IE要用ActiveXObject实现相同功能，本文就不讨论了）。
后续代码将假设已经获得了XMLHttpRequest对象，其名为req。下面将介绍XMLHttpRequest对象用常见的五种Content-Type发送数据的方式。
application/x-www-form-urlencoded
这种Content-Type要求数据按照key1=value1&key2=value2的格式发送给后端，且其中的特殊字符需要转义成%HH的形式。
首先，需要用encodeURIComponent()函数编码表单数据，代码如下。
/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */
var tempArr = [];
for (var key in data) {
if (data.hasOwnProperty(key)) {
tempArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
var dataToSend = tempArr.join('&');
接着，设置请求头部的Content-Type，发送数据，代码如下。
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(dataTosend);
multipart/form-data
这种Content-Type类型多用来提交文件，我们采用HTML5的FormData对象来构建提交的数据。FormData对象的浏览器支持情况见：。基本上现代浏览器都支持，IE11以下不支持，不支持的建议用ajaxForm之类的jquery的文件提交插件吧。
首先，用FormData对象构建欲提交的数据，代码如下。
/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */
var dataToSend = new FormData();
// HTML5对象, IE11以下不支持
for (var key in data) {
if (data.hasOwnProperty(key)) {
dataToSend.append(key, data[key]);
// dataToSend就是FormData对象，可直接传给后端
dataToSend
接着，直接发送给后端，注意这种类型的发送方式，不能设置请求头部的Content-Type，应交给浏览器来处理（设定Boundary等工作）。
req.send(dataToSend);
text/plain
如果请求头部没有设定Content-Type，且数据既不是FormData也不是XML Document（将在xml小节中介绍），则Content-Type默认为text/plain。
这种方式的代码很简单，直接发送字符串即可，代码如下。
req.send('...(此处是字符串格式的数据)');
application/json
JSON格式的数据，后端和各种移动端都很方便处理，用这种MIME类型时，需要将数据对象转换成JSON串。
首先，转换数据成JSON串；然后，设定请求头部的Content-Type，就可以发数据了。代码如下。
/* data参数为表单数据组成的对象 */
req.send( JSON.stringify(data) );
目前没有遇到过要用XML的情况，大部分都可用JSON代替，为了完整起见，我也顺便总结一下。
首先，构建XML文档对象，存入表单数据，代码如下。
/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */
var dataToSend = document.implementation.createDocument("", "formdata", null);
var tempData = dataToSend.documentE
for (var key in data) {
if (data.hasOwnProperty(key)) {
var keyElement = doc.createElement(key);
keyElement.appendChild(doc.createTextNode(data[key]));
tempData.appendChild(keyElement);
xml文档格式示意：
&formdata&
&key1& value1 &/key1&
&key2& value2 &/key2&
&/formdata&
之后，与multipart/form-data一样，直接发送数据，不需设置Content-Type。
req.send(dataToSend);
multipart/form-data与text/xml不需要设置请求头的Content-Type；
关于method，以上都是POST方式，若是GET方式是没有请求数据体的，数据直接加在URL后面；
附：接收请求时的解析方式
text/xml：用responseXML
application/json：需要先JSON化，JSON.parse( responseText )
其他：就直接用responseText
jQuery 方式
application/x-www-form-urlencoded
jQuery中默认的表单提交方式，与XMLHttpRequest不同的地方在于：数据的URL方式编码，由jQuery来做，只需要在$.ajax({})参数中设置processData = true（这也是默认，可省略）。
代码如下。
/* dataToSend为Object类型的表单数据，否则jQuery会抛出异常 */
method: 'POST',
url: '...',
data: dataToSend,
contentType: 'application/x-www-form-urlencoded',
processData: true,
success: function() {...}
注意：若采用GET方式，则将method改为GET即可，不需要在url后面加上数据。
multipart/form-data
这种MIME类型的提交方式，适合用于上传文件。
首先，对表单数据构建成FormData的HTML5对象，代码如下。
/* dataToSend 是FormData对象，可直接作为数据传输到后端 */
var dataToSend= new FormData();
// HTML5对象, IE11以下不支持
for (var key in data) {
if (data.hasOwnProperty(key)) {
dataToSend.append(key, data[key]);
之后，用$.ajax()方法传输数据。注意：processData与contentType必须设定为false，前者是因为避免FormData对象被转换成URL编码，后者则是因为需要靠浏览器添加multipart/form-data类型的boundary。
method: 'POST',
url: '...',
data: dataToSend,
// dataToSend 是FormData对象
contentType: false,
// contentType 必须设置为false
processData: false,
// processData 必须设置为false
success: function() { ... }
text/plain
用该类型提交，则直接传输字符串。
method: 'POST',
url: '...',
data: dataToSend,
contentType: 'text/plain',
processData: false,
// processData 设置为false则不会转换成URL编码
success: function() { ... }
application/json
用该类型提交，则传输JSON字符串，所以要用函数JSON.stringify()处理表单数据。
/* data 为表单Object类型的数据 */
dataToSend = JSON.stringify(data);
method: 'POST',
url: '...',
data: dataToSend,
contentType: 'application/json',
processData: false,
// processData 设置为false则不会转换成URL编码
success: function() { ... }
注意：若后端也返回JSON字符串时，success回调函数里接受到的数据参数仍为字符串，需要转换成Object类型。（而Angular不需要）
success: function(data) {
var jsonData = JSON.parse(data);
首先，构建XML文档对象，存入表单数据，代码如下。
/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */
var dataToSend = document.implementation.createDocument("", "formdata", null);
var tempData = dataToSend.documentE
for (var key in data) {
if (data.hasOwnProperty(key)) {
var keyElement = doc.createElement(key);
keyElement.appendChild(doc.createTextNode(data[key]));
tempData.appendChild(keyElement);
xml文档格式示意：
&formdata&
&key1& value1 &/key1&
&key2& value2 &/key2&
&/formdata&
之后，发送数据dataToSend，代码如下。
method: 'POST',
url: '...',
data: dataToSend,
contentType: false,
// contentType 可设为false也可写成具体的'text/xml'等
processData: false,
// processData 必须设为false
success: function() { ... }
AngularJS 方式
application/x-www-form-urlencoded
用这种MIME类型提交表单数据，则需要对表单数据进行URL编码，用$.param(data)函数，代码如下。
method: 'POST',
url: '...',
data: $.param(dataToSend),
headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
).success(...);
multipart/form-data
首先，该类型如果要上传文件，那么Angular为了获取文件，推荐写成指令。代码如下。
.directive("fileReader", [function () {
restrict: 'AE',
fileReader: "="
// HTML中的file-reader作为存放文件对象的变量
link: function (scope, element) {
element.bind("change", function (changeEvent) {
scope.$apply(function () {
scope.fileReader = changeEvent.target.files[0];
/* HTML结构如下 */
&input type="file" name="key1" file-reader="formData.file[1]"&
然后，需要用FormData对象来包装表单数据并传输，建议写在$http服务的transformRequest选项中；另外，与jQuery类似其中的请求头Content-Type要设置为undefined。代码如下。
method: 'POST',
url: '...',
data: dataToSend,
headers: {
'Content-Type': undefined
// 必须设置为undefined
transformRequest: function(data) {
var tempFormData = new FormData();
// HTML5对象, IE11以下不支持
for (var key in data) {
if (data.hasOwnProperty(key)) {
tempFormData.append(key, data[key]);
return tempFormD
}).success(...)
text/plain
以字符串的方式提交表单数据，代码如下。
method: 'POST',
url: '...',
data: dataToSend,
headers: {
'Content-Type': 'text/plain'
}).success(...)
application/json
以JSON字符串的方式提交表单数据，用JSON.stringify()函数转换，代码如下。
method: 'POST',
url: '...',
data: JSON.stringify(dataToSend),
headers: {
'Content-Type': 'application/json'
}).success(...)
注意：但是在success函数里接受到的参数，就是Object对象，不需要和jQuery一样用JSON.parse()转换。
与multipart/form-data类似，在transformRequest中构建XML Document，请求头中的Content-Type设置为undefined或text/xml等，代码如下。
method: 'POST',
url: '...',
data: dataToSend,
headers: {
'Content-Type': undefined
// 设置为undefined或'text/xml'等
transformRequest: function(data) {
var doc = document.implementation.createDocument("", "formdata", null);
var tempData = doc.documentE
for (var key in data) {
if (data.hasOwnProperty(key)) {
var keyElement = doc.createElement(key);
keyElement.appendChild(doc.createTextNode(data[key]));
tempData.appendChild(keyElement);
}).success(...)
附：GET方式提交表单数据
Angular用GET方式提交表单数据，应该用$http服务的params而不是data来传数据，params可以直接传入Object类型数据，代码如下。
method: 'GET',
url: '...',
params: dataToSend
}).success(...)
0 收藏&&|&&28
你可能感兴趣的文章
4 收藏，928
65 收藏，3.7k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：