jquery 中 ajax

完整文檔

ajax 調用

html 

<input type="file" multiple  id="files">
<button onclick="jqueryAjax2()">上傳文件s</button>
<p id="files_progress" style="width:0px; height: 10px; background-color: #0e90d2"></p>

js 

function jqueryAjax2() {

        var fd = new FormData();
        // 上傳單個、多個文件數據
        var file_data = $("input[type='file']")[0].files;
        console.log(file_data)
        // 如果直接寫 formData.append("server_files", files); 後端接收不到 server_files
        for (var i = 0; i < file_data.length; i++) {
            fd.append("files["+i+"]", file_data[i]);
        }
        // 發送數據
        fd.append('id',34);
        fd.append('name','abc');
        fd.append('char','中文字符');
        // 請求地址
        var url = "http://casphp.com/api/AjaxRequest/jqueryAjax2";
        // 設置 header
        var header={
            "Authorization":"token_value"
            // ,"Cookie":"cookie_name=cookie_value" //  w3c 不允許設置cookie
        };

        // 發送請求
        $.ajax({
            type:"POST",
            url:url,
            data:fd,
            // dataType設置你收到服務器數據的格式
            dataType:"JSON",
            //默認情況下(值爲true)會將發送的數據序列化以適應默認的內容類型application/x-www-form-urlencoded;
            //如果想發送不想轉換的的信息的時候需要手動將其設置爲false
            processData: false,  // 表示不讓jQuery將fd對象處理成字符串，應該直接使用fd對象
            //contentType 主要設置你發送給服務器的格式，上傳的是文件，這裏設置爲false
            //contentType都是默認的值：application/x-www-form-urlencoded，這種格式的特點就是，name/value 成爲一組，每組之間用 & 聯接，而 name與value 則是使用 = 連接。參數形式: key=fdsa&lang=zh
            contentType: false,  //使用FormData時不能設置Content-Type，讓FormData自己處理，所以改成false
            // 添加header 信息
            headers:header,
            //  默認情況下，標準的跨域請求是不會發送cookie的,攜帶瀏覽器已存在的cookie
            xhrFields: {
                withCredentials: true
            },
            //如果 跨域請求 攜帶不過去去 withCredentials:true,可以使用下面的方法
            beforeSend:function(xhr){
                xhr.withCredentials = true;
                // 也可以在這裏定義header
                xhr.setRequestHeader('XX-Device-Type', 'extra_head_data');
                console.log('請求開始');
            },
            // 上傳進度條，不是真實上傳到服務端數據
            xhr: function () {
                var xhr = new XMLHttpRequest();
                //使用XMLHttpRequest.upload監聽上傳過程，註冊progress事件，打印回調函數中的event事件
                xhr.upload.addEventListener('progress', function progressFn(e) {
                    //e.total代表總數爲多少,e.loaded代表上傳了多少
                    var progressPercent = Math.round((e.loaded / e.total) * 100,-2) + '%';
                    $('#file_progress').width(progressPercent).html(progressPercent);
                    if(e.loaded == e.total){
                        xhr.upload.removeEventListener('progress',progressFn,false)
                    }
                },false);
                return xhr;
            },
            success: function(data,statu,response){
                if(data.code==1){
                    console.log(data.data);
                }else{
                    console.log(data.msg);
                }
            },
            complete:function () {
                console.log('請求完成');
            },
            error: function(xhr,status,errorinfo) {
                console.log(status,errorinfo)
            }
        });
    }

promise 封裝 ajax

 html

<input type="file" multiple  id="filess">
<button onclick="jqueryAjax3()">上傳文件ss</button>
<p id="filess_progress" style="width:0px; height: 10px; background-color: #0e90d2"></p>

 js 封裝爲 Promise 函數

function promiseAjax(method,url,data,header){
    return new Promise(function(resolve, reject){
        $.ajax({
            type: method,
            url: url,
            data:data,
            // 表示不讓 jQuery 將 formData 對象處理成字符串，應該直接使用 formData 對象
            processData: false,
            // 使用 FormData 時不能設置 Content-Type，讓 FormData 自己處理，所以改成false
            contentType: false,
             headers:header,
            //  默認情況下，標準的跨域請求是不會發送cookie的,攜帶瀏覽器已存在的cookie
            xhrFields: {
                withCredentials: true
            },
            //如果 跨域請求 攜帶不過去去 withCredentials:true,可以使用下面的方法
            beforeSend:function(xhr){
                xhr.withCredentials = true;
                // 也可以在這裏定義header
                xhr.setRequestHeader('XX-Device-Type', 'extra_head_data');
                console.log('請求開始');
            },
            dataType: 'json',
            // 上傳進度條，不是真實上傳到服務端數據
            xhr: function () {
                var xhr = new XMLHttpRequest();
                //使用XMLHttpRequest.upload監聽上傳過程，註冊progress事件，打印回調函數中的event事件
                xhr.upload.addEventListener('progress', function progressFn(e) {
                    //e.total代表總數爲多少,e.loaded代表上傳了多少
                    var progressPercent = Math.round((e.loaded / e.total) * 100,-2) + '%';
                    $('#filess_progress').width(progressPercent).html(progressPercent);
                    if(e.loaded == e.total){
                        xhr.upload.removeEventListener('progress',progressFn,false)
                    }
                },false);
                return xhr;
            },
            success: function(res) {
                if(res.code==1){
                    // 成功則返回數據
                    resolve(res.data)
                }else{
                    reject('服務端請求失敗返回信息')
                }

            },
            error:function(err){
                reject('請求錯誤信息：'+err.status+' '+err.statusText)
            },
            complete:function () {
                console.log('請求完成')
            }
        })
    })
}

調用 promiseAjax

function jqueryAjax3() {
        var fd = new FormData();
        // 上傳單個、多個文件數據
        var file_data = $("input[type='file']")[0].files;
        console.log(file_data);
        // 如果直接寫 formData.append("server_files", files); 後端接收不到 server_files
        for (var i = 0; i < file_data.length; i++) {
            fd.append("files["+i+"]", file_data[i]);
        }
        // 發送數據
        fd.append('id',34);
        fd.append('name','abc');
        fd.append('char','中文字符');
        // 請求地址
        var url = "http://casphp.com/api/AjaxRequest/jqueryAjax2";
        // 設置 header
        var header={
            "Authorization":"token_value"
            // ,"Cookie":"cookie_name=cookie_value" //  w3c 不允許設置cookie
        };
        // 調用示例
        promiseAjax('POST',url,fd,header).then(function(res){
            // 成功時調用
            console.log(res)
        }).then(function(err){
            // 失敗時調用
            if(err)console.log(err);
        }).catch(function(err){
            // 服務器請求錯誤
            console.log(err)
        });
    }