FormData js对象的介绍和使用
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对象的介绍和使用的更多相关文章
- js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
- JS 对象封装的常用方式
JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...
- jQuery对象入门级介绍
你是否曾经见过像 $(".cta").click(function(){})这样的JavaScrip代码?或许你还会思考下 $('#X') 是什么,如果看到这些你都觉得摸不着头脑 ...
- js对象,原型,call,apply浅析
//对象直接量,创建对象最简单的方式是在js里使用对象直接量 var book = { "main title": "js", //属性里有空格,要用引号 &q ...
- DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)
一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢 ...
- JSON字符串和JS对象
JSON和JS对象 一 JSON是什么 JSON是基于文本的,轻量的,用于数据交换的,一种格式. 可以看到JSON的定义里面有很多的定语,现在就每个限定解释一下: 1. 基于文本 这里的意思是相对于哪 ...
- 从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍
Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就 ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
随机推荐
- docker入门之基础操作
docker,我们可以把docker当作是简单的虚拟机.但这个虚拟机不像vm一样安装系统.所以我们又称之为容器.你可以理解成,容器就是虚拟机 docker与vm的对比 vmware:下载镜像——安装系 ...
- Docker for Windows 启动失败,提示Kubernetes证书无效
起因 部署服务器到一台很久未更新的系统(windows 10),安装docker后,恰好系统自动更新,重启后docker不能启动,提示Kubernetes证书无效(未截到图,抱歉) 排查 因为没有开启 ...
- OpenERP 中国财务模块 调整
最开始的模样是这个样子的 后三行是没用的,于是在RML文件中注释掉相关的代码,改进后的界面如下: 这个样子看起来是好多了,但是 数量跟是十亿千百的那块看起来还是很别扭,调整行高后的结果: 最诡异的事情 ...
- (转)CentOS 7 下 MySQL 5.7 配置 Percona Xtrabackup
CentOS 7 下 MySQL 5.7 配置 Percona Xtrabackup 原文:http://qizhanming.com/blog/2017/05/10/install-percona- ...
- spring boot快速入门 5: 事务管理
事务管理: 新增两名女生: 第一步:创建 GirlRespository package com.payease.service; import com.payease.entity.Girl; im ...
- IE haslayout的理解与bug修复
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout 什么是 haslayout ? ...
- Winform为窗体增加快捷键
1. 定义窗体的 xxx_KeyDown(object sender, EventArgs e) 2. 书写快捷键的代码: //这里的xxx代表你的窗体名 private void xxxx_KeyD ...
- hadoop开发环境
hadoop2.6伪分布式环境安装配置以及配置eclipse开发环境 Hadoop安装教程_单机/伪分布式配_Hadoop2.6.0/Ubuntu14.04 使用Eclipse编译运行MapReduc ...
- http协议--文章一
一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method 指定提交方式为GET或者POST,默认为GET提交 Http定义了与服务器交互的不同方法,最基本 ...
- Visual Studio 2017 远程调试(Remote Debugger)应用
I.远程调试情景 项目部署在远程服务器或非本地环境中,需要 处理应用中遇到的一些错误时 (不能直接附加进程或F5调试应用). II. 远程调试准备 1.远程服务器--操作系统和硬件要求 MSDN 操作 ...