AJAX提交表单的方法

发表于   |   分类于   |  

最近我在学习使用ajax与php交互，这里就简单的写一下利用ajax异步提交表单的方法。

最简单的SERIALIZE()

这是jquery 提交表单最简单使用的方法，会将表单中的text、textarea、radio、checkbox字段转换为一个连起来的字符串：

$("#form1").serialize()

“name=john&sex=male&email=john%40qq.com”
这就好比一个js对象，键为表单的name属性，值就是表单的value，在提交到服务器端时，最简单的用法就是使用jquery自带的$.post()方法：

$.post("test.php", $("#form1").serialize());

但是这种方法无法上传文件。

JS的FORMDATA()对象

js中的FormData()对象是我觉得最好用的表单传值对象，用法很简单：

var _form = document.getElementById("formid"); 
var fd = new FormData(_form);

fd就是一个表单数据对象，和之前的serialize方法一样，直接作为数据在post中传递，不同的是它可以上传文件，并且可以自己在表单数据对象中加入自己定义的数据。

fd.append("username","snakebang");
fd.append("age",18);

这些都可以自己传值，这样就很方便的提高了网页的交互性，可以把form外边的数据取到formdata中然后提交，比较上传用户信息的时候绑定一个用户id，一起提交到后台，这样就很方便了。
而且FormData对象在js和jq中都可以使用：

js中：

var fd = new FormData(document.getElementById("form1"));
var xhr = new XMLHttpRequest();
xhr.open("post","test.php",true);
xhr.send(fd);

jq中：

var fd = new FormData($("#form1")[0]);
$.ajax({
      url: "upload2.php",
      method: "post",
      processData: false,
      contentType: "multipart/form-data", 
      cache: false,
      data: fd
 })

注意，在jq中使用ajax方法，一定要把processData 设置为false,防止自动转换数据，如果表单的contentType已经定义好了：

“multipart/form-data”，就把此项属性设置为false，如果没有设置的话，你可以自己设置”multipart/form-data”。

$("#form1")[0] === document.getElementById("form1") //true