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 (使用<form>表单构造FormData对象，form标签需添加enctype = "multipart/form-data")

<form id="myForm" name="myForm" enctype = "multipart/form-data" >
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="button" value="Submit!" id="submit">
</form>

var submit=document.querySelector("#submit");
submit.onclick=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.onload=function(){
        if(xhr.status==200){
            //...
        }
    }
}

例子2（不使用<form>表单构造FormData对象）

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

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('超时')
    }
     
    }


});