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)
        });
    }