ajax获得表单值的俩种方法

FormData

FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时，使用FormData对象可以减少拼接queryString的工作量。同时FromData可以接收到二进制文件（可以用来做异步上传文件），serialize只能序列化简单的数据。

new FormData的参数是一个DOM对象，而非jQuery对象
我们通过[index]的方法，来得到相应的DOM对象。

var formData = new FormData($("#fileinfo")[0]); 

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) {                      }                 });

文章来源: ajax获得表单值的俩种方法