JQuery-传送formdata对象给后台-1.1

WHAT

    我们先来说说formdata是什么。在network中我们如果传输了formdata对象,那我们就会看到以下的内容。

JQuery-传送formdata对象给后台-1.1

    MDN上这么说的:“FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。”

    也就是说,formdata是一种表单对象,他是键值对的形式展示的。

 

SET FORMDATA

    设置formdata对象,方法有三种。第一种,通过表单初始化的形式,形成formdata

var formdata=new FormData(document.querySelector("#myForm"));

第二种,创建一个空对象,手动添加键值对

var formdata=new FormData();
formdata.append("name","abc");

第三种,表单序列化,但这种方法只能序列化表单中的数据,文件的话也不能上传。

$("form").serialize()

    至于formdata对象如何增删改,就不属于本次的内容。请自行查找相关内容。

 

SEND FORMDATA

///使用ajax请求数据
///url          :传输url
///sendData     :发送的数据
///isAsync      :是否为异步访问
///functionList :过程中监听的事件集(对象)
function ajax(url, sendData, isAsync, functionList) {
    $.ajax({
        url: url,
        type: "POST",
        async: isAsync,
        data: sendData,
        contentType: false, //必须false才会自动加上正确的Content-Type
        processData: false, //必须false才会避开jQuery对 formdata 的默认处理
        success: functionList.loadFunction,
        error: functionList.errorFunction
    });
}

    然后就能发送formdata对象了。

 

    经过n多次ajax出错,我终于顿悟啦。(其实只是发现了一个状况),有时候我们想我们前端发送一个json给后端,为什么后端取json的时候取不到?

function ajax(url, isAsync) {
    $.ajax({
        url: url,
        async: isAsync,
        type: "POST",
        data: { "name": 'AA', id:1 },
        success: function(data){},
        error: function(){}
    });
}

代码没问题啊,但你是否注意到network,它里面的是formdata哦。这就意味着,如果没有特殊处理,后端收到的就会是formdata对象,取值也只能通过formdata的取值方式。

    JQuery-传送formdata对象给后台-1.1

如果想要直接对应到后台参数上,就需要加一些别的内容。

$.ajax({
    url: "http://192.168.2.86/myMVC/my/Exist",
    type: "POST",
    data: JSON.stringify({name: 1}),
    contentType: "application/json",
    success: function(data){},
    error: function(){}
});

contentType: "application/json"就是按照json的格式传输数据

JQuery-传送formdata对象给后台-1.1这回就是对的。

上一篇:Vue 中使用axios传参数,后端收不到数据


下一篇:formDate序列化