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

WHAT

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

    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的取值方式。

    

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

$.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的格式传输数据

这回就是对的。