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的格式传输数据
这回就是对的。