FormData js对象的介绍和使用

FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时,使用FormData对象可以减少拼接queryString的工作量(queryString是查询字符串,http查询字符串由url中?后面的值指定)

当页面上的form以GET方式向页面发送请求数据时 (如数据含有不安全字符,则浏览器先将其转换成16进制的字符再传送,如空格被转换成%20时 ) ,web server 将请求数据放入一名为QUERY_STRING的环境变量中。    Request.QueryString  方法是从这一环境变量中取出相应的值,并将被转成16进制的字符还原

FormData

1. 概述

FormData 对象的使用:
1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成
一个queryString
2. 异步上传二进制文件。

 

2、属性

1. FormData对象的操作方法,可以在原型中查看

3、用法

创建一个formData对象实例有几种方式

1、创建一个空对象实例

var formData = new FormData();

此时可以调用append()方法来添加数据

2、使用已有的表单来初始化一个对象实例

假如现在页面已经有一个表单

<form id="myForm" action="" method="post">
<input type="text" name="name">名字
<input type="password" name="psw">密码
<input type="submit" value="提交">
</form>

  

我们可以使用这个表单元素作为初始化参数,来实例化一个formData对象

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上,添加其他数据
formData.append("token","kshdfiwi3rh");

  (文章参考自:https://segmentfault.com/a/1190000012327982  https://blog.csdn.net/saharalili/article/details/79002568)

 

FormData js对象的介绍和使用的更多相关文章

  1. js中关于Blob对象的介绍与使用

    js中关于Blob对象的介绍与使用   blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...

  2. Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

    什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...

  3. JS 对象封装的常用方式

    JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...

  4. jQuery对象入门级介绍

    你是否曾经见过像  $(".cta").click(function(){})这样的JavaScrip代码?或许你还会思考下 $('#X') 是什么,如果看到这些你都觉得摸不着头脑 ...

  5. js对象,原型,call,apply浅析

    //对象直接量,创建对象最简单的方式是在js里使用对象直接量 var book = { "main title": "js", //属性里有空格,要用引号 &q ...

  6. DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)

    一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢 ...

  7. JSON字符串和JS对象

    JSON和JS对象 一 JSON是什么 JSON是基于文本的,轻量的,用于数据交换的,一种格式. 可以看到JSON的定义里面有很多的定语,现在就每个限定解释一下: 1. 基于文本 这里的意思是相对于哪 ...

  8. 从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍

    Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就 ...

  9. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

随机推荐

  1. SpringBoot + Scala环境部署

    在pom.xml文件中添加: <dependencies>中 <!-- 添加Scala依赖 --> <dependency> <groupId>org. ...

  2. apache 子域名自动与子域名同名的目录绑定

    假设有域名domain.com,已经泛解析子域名*.domain.com到该主机的ip,web根目录为/var/www/,在访问a.domain.com时,能自动绑定/var/www/a/目录,访问b ...

  3. [意识流]简单易懂的AC自动机

    为了一言不合就徒手敲AC自动机,决定看一下原理 于是花了一张图, 参考HDU2222的样例 于是看懂这张图的你很快就敲出了如下代码并且AC了 #include<bits/stdc++.h> ...

  4. Centos7安装python3.7.1并与python2共存

    转自:http://www.cnblogs.com/JahanGu/p/7452527.html参考:https://www.jb51.net/article/104326.htm 1. 备份原来的p ...

  5. linux下RabbitMQ相关命令

    1. 关闭与启动 ① 到指定目录:cd/etc/init.d ② 停止:rabbitmq-server stop ③ 启动:rabbitmq-server start ④ 查看是否停止/启动成功:ps ...

  6. AngularJs 指令实现选项卡

    HTML: <body ng-controller="Aaa"> <my-tab my-id="div1" my-data="dat ...

  7. Android版本信息及与Linux和Java的关系

    1.Android与Linux和Java的关系 Android严格来说,不能算是Linux,Android是一个统称,具体来说,是Google用了Linux的一个核心,用这个核心来管理进程,控制硬件. ...

  8. Java二进制兼容性原理

    一.概述 现在的软件越来越依赖于不同厂商.作者开发的共享组件,组件管理也变得越来越重要.在这方面,一个极其重要的问题是类的不同版本的二进制兼容性,即一个类改变时,新版的类是否可以直接替换原来的类,却不 ...

  9. the unchecked warnings

    5.1.9. Unchecked Conversion Let G name a generic type declaration with n type parameters. There is a ...

  10. 创建第一个WCF服务

    创建WCF服务 1. 新建立空白解决方案,并在解决方案中新建项目,项目类型为:WCF服务应用程序. 2.建立完成后如下图所示: 3.删除系统生成的两个文件IService1.cs与Service1.s ...