FormData
介紹
FormData對象，可以把所有表單元素的name與value組成一個queryString,提交到后台。 在使用ajax提交時，使用FormData對象可以減少拼接queryString的工作量。同時FromData可以接收到二進制文件（可以用來做異步上傳文件），serialize只能序列化簡單的數據。
注意：參數
new FormData的參數是一個DOM對象，而非jQuery對象
我們通過[index]的方法，來得到相應的DOM對象。
var formData = new FormData($("#fileinfo")[0]); - 1
用於文件上傳
form表單添加 enctype="multipart/form-data"
<form enctype="multipart/form-data" method="post" id="fileinfo"> <label>圖片:</label> <input type="file" name="file" /> <input type="submit" value="提交" /> </form>ajax中必須加入下面這倆個配置
processData: false, contentType: false, var formData = new FormData($("#fileinfo")[0]); $.ajax({ dataType: "json", type: "post", // 提交方式 get/post url: '/dog/saveOrUpdate.action', // 需要提交的 url data: formData, processData: false, contentType: false, success: function(data) { } });
用法
html
<form id="itemForm" class="form-horizontal" enctype="multipart/form-data"> <div class="form-body"> <div class="form-group"> <label class="col-md-3 control-label"><span class="required" aria-required="true"> * </span>流浪狗名稱</label> <div class="col-md-4"> <div id="input-error"> <input id="dogName" name="dogName" type="text" class="form-control" value="" /> </div> </div> </div> <div class="form-group"> <label class="col-md-3 control-label"><span class="required" aria-required="true"> * </span>流浪狗品種</label> <div class="col-md-4"> <div id="input-error"> <input id="dogKind" name="dogKind" type="text" class="form-control" value="" /> </div> </div> </div> <div class="form-group"> <label class="col-md-3 control-label"><span class="required" aria-required="true"> * </span>流浪狗年齡</label> <div class="col-md-4"> <div id="input-error"> <input id="dogAge" name="dogAge" type="text" class="form-control" value="" /> </div> </div> </div> <div class="form-group"> <label class="col-md-3 control-label"><span class="required" aria-required="true"> * </span>流浪狗圖片</label> <div class="col-md-4"> <div id="input-error"> <input id="file" name="file" type="file" value="" /> </div> </div> </div> </div> <div class="form-actions"> <div class="row"> <div class="col-md-offset-3 col-md-9"> <button type="submit" class="btn green-jungle">提 交</button> <button type="reset" class="btn grey-salsa btn-outline">取 消</button> </div> </div> </div> </form>
ajax
var itemForm = $('#itemForm'); var formData = new FormData($("#itemForm")[0]); $.ajax({ dataType: "json", type: "post", // 提交方式 get/post url: '/dog/saveOrUpdate.action', // 需要提交的 url data: formData, processData: false, contentType: false, success: function(data) { // 登錄成功或者失敗的提示信息 if (data.status == 200 && data.msg == "OK") { } else { } }, error: function (response, ajaxOptions, thrownError) { } });serialize
介紹
serialize() 方法通過序列化表單值，創建 URL 編碼文本字符串。
你可以選擇一個或多個表單元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中。
使用serialize前 
使用serialize后 
用法
ajax
var commentId = $("#commentId").val(); //獲取form表單的jquery對象 var commentInfoForm = $('#commentInfoForm'); $.ajax({ dataType: "json", type: "post", // 提交方式 get/post url: '/comment/saveOrUpdate.action', // 需要提交的 url data: commentInfoForm.serialize(), success: function(data) { // 登錄成功或者失敗的提示信息 if (data.status == 200 && data.msg == "OK") { } else { } }, error: function (response, ajaxOptions, thrownError) { } });