ajax提交表单和参数,FormData及jqAjax参数

一. FormData (HTML5对象，低于IE10 的IE浏览器不支持)

提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出

常用方法：

1.FormData.append(key,value) //向FormData对象中添加键值对

2.FormData.delete(key) //删除指定的key及对应的value,有多个相同的key会一并删除

3.FormData.get(key) //获取指定key的值，如果多个，返回第一个 (IE，Safari完全不支持)

4.FormData.getAll(key) //获取指定key的所有值，返回为数组 (IE，Safari完全不支持)

5.FormData.has(key) //是否含有指定的key，返回boolean值 (IE，Safari完全不支持)

6.FormData.set() //对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。(IE，Safari完全不支持)

例子1 (使用

表单构造FormData对象，form标签需添加enctype = "multipart/form-data")

Enter name:

Enter account number:

Upload file:

var submit=document.querySelector("#submit");

submit.οnclick=function(){

var myForm = document.getElementById('myForm');

var formData = new FormData(myForm); // 表单初始化FormData对象

console.log(formData) // 直接打印是看不到键值的，需要使用get或getAll方法

var xhr=new XMLHttpRequest();

xhr.open("post",postUrl);

xhr.send(formData);

xhr.οnlοad=function(){

if(xhr.status==200){

//...

}

}

}

例子2(不使用

表单构造FormData对象)

upload

var formData = new FormData();

formData.append('file', $('#file')[0].files[0]);

$.ajax({

url: '/upload',

type: 'post',

cache: false,

data: formData,

processData: false,

contentType: false,

success:function(){

}

})

二. jquery的ajax请求常用参数详解

$.ajax({

url: 'xxx', // 请求地址

type: 'post', // 请求方式(post或get)，默认get

timeout: 2000, // 请求超时时间,毫秒

async: true, // 请求是否异步处理，默认true

data: formData, // 发送到服务器的数据

dataType: 'json', // 预期服务器返回的数据类型，包括xml,html,script,json,jsonp,text

cache: false, // 浏览器是否缓存被请求页面，默认为true

/*

* contentType是发送给服务器的格式

* "application/x-www-form-urlencoded",默认(格式特点key和value为一组，组间用&连接)

* "application/json"，适合复杂的json数据，用JSON.stringfy序列化后发送，服务端再JSON.parse进行还原

* false，会自动加上正确的Content-Type(比如form标签中设置了enctype="multipart/form-data",请求中的contentType就会默认为multipart/form-data)

*/

contentType:false,

processData: false, // 请求发送的数据是否转换为查询字符串，默认true，(设置为false，因为data值是FormData对象，避免FormData对象被转换成URL编码。)

context:{some:'value'}, // 为所有 AJAX 相关的回调函数规定 "this" 值。

username:'username', // 响应HTTP访问认证请求的用户名

password:'password', // 响应HTTP访问认证请求的密码

global:true, // 默认是 true，是否为请求触发全局 AJAX 事件处理程序。

ifModified:false, // 默认是 false。是否仅在服务器数据改变时获取数据。使用HTTP包Last-Modified头信息判断。

/*

* traditional参数，是否使用参数序列化的传统样式，默认是 false，jquery会深度序列化参数对象。

* 设置为true阻止深度序列化，后台通过request.getParameterValues()来获取参数的值数组

*/

traditional:false,

beforeSend:function(xhr){ // 发送请求前运行的函数

// 禁用按钮防止重复提交

$("#submit").attr({ disabled: "disabled" });

},

success:function (data) { //成功回调

console.log(data);

console.log(this.some) // 'value'

},

error:function(xhr, status, err){ //失败回调

},

complete: function (xhr, status) { // 请求完成回调

if (status == 'timeout') {

ajaxTimeOut.abort(); //取消请求

alert('超时')

}

}

});