前端通过Jquery封装Ajax发送post请求，上传文件携带参数

Qx7

已于 2022-03-17 09:12:08 修改

阅读量4.7k

点赞数 1

分类专栏： Ajax 文章标签：前端 ajax jquery

于 2022-03-17 09:09:59 首次发布

本文链接：https://blog.csdn.net/m0_51658494/article/details/123541783

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：通过Ajax的POST请求上传文件并携带参数，后端接口需要的参数是：一个pdf文件和一个用户名

先直接上代码

//html
<form id="uploadForm" enctype="multipart/form-data" >
    <input id="pdfFile" type="file" name="pdfFile" class="choose_file"/>
</form>
<button id="upload">上传文件</button>

//enctype就是encodetype就是编码类型的意思
//默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据

//js
$("#upload").on('click',function () {
    const formData =  new FormData($('#uploadForm')[0]);//将选择上传的name="pdfFile"的文件赋值给formData
    formData.append("username","admin");//接口还需要一个用户名参数，通过append附加到formData上
    //formdata.append('name','value'); //使用append的方法为 formdata 对象赋值
    //千万不能直接把参数和文件放在下面post请求的data里面，！！！！data就是整个formData！！！！！
    $.ajax({
        type: 'post',
        url: '/apis/first/*',
        data: formData,
        processData: false, 
        contentType: false,
        dataType:'json',
        success: function (res) {
            console.log(res);
        },
        error: function (){
            console.log('err');
        }
    });
});

在这里插入图片描述

Ajax属性：cache、processData、contentType

① cache：缓存
当发起一次请求后，会把获得的结果以缓存的形式进行存储，当再次发起请求时，如果 cache 的值是 true ，那么会直接从缓存中读取，而不是再次发起一个请求了。
从 cache 的工作原理可以得出，cache 的作用一般只在 get 请求中使用。

② processData：处理数据
默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候，则不需要把其转换为字符串，因此要改成false

③ contentType：发送数据的格式
和 contentType 有个类似的属性是 dataType ，代表的是期望从后端收到的数据的格式，一般会有 json 、text……等，而 contentType 则是与 dataType 相对应的，其代表的是前端发送数据的格式，默认值：application/x-www-form-urlencoded，代表的是 ajax 的 data 是以字符串的形式如 id=2019&password=123456使用这种传数据的格式，无法传输复杂的数据，比如多维数组、文件等

Jquery的ajax的设置机制为若没有content-type属性，则默认设置为 application/x-www-form-urlencoded; charset=UTF-8 contentType: false设置的目的是让ajax不要操作content-type

小白自己写着记录下学习笔记，欢迎大佬指正