serialize()和FormData对象都可将表单数据序列化,后通过ajax异步提交,但二者有实质区别:
1 serialize()
serialize()是JQuery方法,可序列化表单值创建 URL 编码文本字符串,就是将表单数据以字符串的形式返回。
缺点:只能序列化一般数据,文件上传则无法序列化。
用法:
<form id="form"> <input type="text" name="name" value=""> <input type="text" name="age" value=""> <button onclick="toSubmit()">提交</button> </form> <script> function toSubmit() { var form = $("#form").serialize(); $.ajax({ type: "POST", url: "", data: form, processData: false, contentType: false, success: function (res) { console.log(res); } }); } </script>2 FormData对象
FormData是HTML5对象,目前可兼容大多主流的浏览器,但不兼容低版本IE浏览器。
与普通的Ajax相比,使用FormData 的最大优点就是可以异步上传二进制文件。
用法1:模拟表单
var formData = new FormData(); formData.append("name","zhangsna"); formData.append("age","16");
这种效果相当于两个表单中input的提交
用法2:通过ajax异步提交表单数据,可实现文件上传。
<form id="form" enctype="multipart/form-data"> <input type="text" name="name" value=""> <input type="text" name="age" value=""> <input type="file" name="file" > <button onclick="toSubmit()">提交</button> </form> <script> function toSubmit() { var formData = new FormData($("#form")[0]); $.ajax({ type: "POST", url: "", data: formData, processData: false,// 不加会报错 contentType: false,// 不加会报错 success: function (res) { console.log(res); } }); } </script>
注意:1 form表单加 enctype="multipart/form-data";2 ajax加 processData: false,contentType: false,