ajax获取值的两种方法

详细连接https://blog.****.net/a1102325298/article/details/80785143

ajax获得表单值的俩种方法

2018年06月23日 17:12:02 延迟满足 阅读数：2234

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

                    }
                });