详细连接https://blog.csdn.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) { }
});

ajax获取值的两种方法的更多相关文章

  1. 选中没有选中的复选框,匹配含有某个字符串的正则,json取值的两种方法,把变量定义在外面跟里面的区别

    一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...

  2. JMeter接口测试-提取动态列表最后一个值的两种方法

    前言 在用JMeter做接口测试时,我们经常会遇到,一个接口返回一个json串,在这个json串中,某个节点的值是一个列表,而且这个列表的长度是动态变化的.今天我们来学习两种提取动态列表最后一个值的两 ...

  3. javascript获取属性的两种方法及区别

    javascript获取属性有两种方式,点或者中括号: var obj={} obj.x=1 console.log(obj.x)//1 第一种方式,x是字面量 try{ console.log(ob ...

  4. js获取json属性值的两种方法

    1.json.XXX 2.json["XXX"] 第二种方法使用场景,当属性值是变量时.如图所示:

  5. ajax异步提交的两种方法

    第一种是原始的ajax,第二种是在jQuery中使用ajax.这是我为测试两种提交方法而写的一段代码. 1.struts.xml <package name="json" e ...

  6. 让索引包含null值的两种方法

    1. 把有NULL值的列与一个常数,或者一个带有not null约束的列一同索引 create index ind_01 on t01(col01,1); 或者 create index ind_01 ...

  7. C# 一次循环获取树的两种方法

    第一种方法好些 第二种方法如果中间断开就会成为一级 private static List<Menu> MenuTree() { , ParentId = , Name = "a ...

  8. Selenium获取input值的两种方法:WebElement.getAttribute("value")和WebElement.getText()

    在页面元素的定位中,有时候需要获取到元素的页面显示值,用来作为断言.例如,我需要获取email的值"amy1111@xxx.com". <input class=" ...

  9. python获取函数参数默认值的两种方法

    1.使用函数的__defaults__魔术方法 demo: # coding=utf-8 def f(a,b,c=1): pass f.__defaults__ 输出结果: (1,) 2.使用insp ...

随机推荐

  1. UVA1626-Brackets sequence(动态规划基础)

    Problem UVA1626-Brackets sequence Time Limit: 4500 mSec Problem Description Input The input begins w ...

  2. [matlab] 7.快速搜索随机树(RRT---Rapidly-exploring Random Trees) 路径规划

    RRT是一种多维空间中有效率的规划方法.它以一个初始点作为根节点,通过随机采样增加叶子节点的方式,生成一个随机扩展树,当随机树中的叶子节点包含了目标点或进入了目标区域,便可以在随机树中找到一条由从初始 ...

  3. spring程序打包使用该插件,不然容易报错xsd找不到

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-shade ...

  4. iptables snat 和dnat说明

    iptables中的snat和dnat是非常有用的,感觉他们二个比较特别,所以单独拿出来说一下. dnat是用来做目的网络地址转换的,就是重写包的目的IP地址.如果一个包被匹配了,那么和它属于同一个流 ...

  5. 吴恩达课后作业学习2-week1-2正则化

    参考:https://blog.csdn.net/u013733326/article/details/79847918 希望大家直接到上面的网址去查看代码,下面是本人的笔记 4.正则化 1)加载数据 ...

  6. IDEA+JUnit

    1.入门 https://blog.csdn.net/smxjant/article/details/78206279 2.比较好的JUnit例子:https://github.com/aws/aws ...

  7. jumpserver安装

    一. 准备 Python3 和 Python 虚拟环境  1.1 安装依赖包 yum -y install wget sqlite-devel xz gcc automake zlib-devel o ...

  8. 在windows下安装Redis

    一.下载windows版本的Redis 由于官网上没有windows版的下载地址,所以需要下载windows版本的Redis有以下两个地址: 博主的csdn资源地址:http://download.c ...

  9. MySQL root密码忘记,原来还有更优雅的解法!

    一直以来,对于MySQL root密码的忘记,以为只有一种解法-skip-grant-tables. 问了下群里的大咖,第一反应也是skip-grant-tables.通过搜索引擎简单搜索了下,无论是 ...

  10. lambda函数

    1.lambda函数是语法简短的匿名函数 2.lambda函数可以接受一个或多个参数 3.lambda函数只能有一个表达式 4.一般用于非重用的代码块 1)g = lambda x : x**2 g( ...