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. Java操作数据库实现"增删改查"

    本文主要讲解JDBC操作数据库    主要实现对MySql数据库的"增删改查" 综合概述: JDBC的常用类和接口 一   DriverManager类 DriverManage类 ...

  2. mysql误删root用户

    在操作mysql时误删除root用户,如何进行恢复 在安装hive时候误删除root用户,存在的用户没有权限,解决方法如下. 1.首先在/etc/my.cnf文件中 mysqlID下面添加 skip- ...

  3. CODEVS-新斯诺克

    原题地址:新斯诺克 题目描述 Description 斯诺克又称英式台球,是一种流行的台球运动.在球桌上,台面四角以及两长边中心位置各有一个球洞,使用的球分别为1 个白球,15 个红球和6 个彩球(黄 ...

  4. 问题 K: 周期串plus

    问题 K: 周期串plus 时间限制: 1 Sec  内存限制: 128 MB提交: 682  解决: 237[提交] [状态] [命题人:外部导入] 题目描述 如果一个字符串可以由某个长度为k的字符 ...

  5. Codeforces Global Round 2 部分题解

    F.Niyaz and Small Degrees 挺sb的一题,为什么比赛时只过了4个呢 考虑当\(x\)固定的时候怎么做.显然可以树形DP:设\(f_{u,i=0/1}\)表示只考虑\(u\)子树 ...

  6. 基于Allwinner的Audio子系统分析(Android-5.1)

    前言 一直想总结下Audio子系统的博客,但是各种原因(主要还是自己懒>_<),一直拖到现在才开始重新整理,期间看过H8(Android-4.4),T3(Android-4.4),A64( ...

  7. Jenkins 源代码编译

    最近一直想写一个关于 Jenkins 管理的 InelliJ 插件,但是尝试很多次总是在登录认证上面失败,各种办法都不起作用,而且官方的文档含糊不清,就动起了从源代码编译在开发环境中进行调试. 废话少 ...

  8. Ngin 简单配置文件

    #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log notice; #error ...

  9. python的socket.recv函数陷阱

    目录 前言 一个粘包实验 执行结果 排错思路 解决和总结 前言 惯例练习历史实验,在编写tcp数据流粘包实验的时候,发现一个奇怪的现象.当远程执行的命令返回结果很短的时候可以正常执行,但返回结果很长时 ...

  10. (转)aix非计算内存 占用过高 案例一则

    原文:http://www.talkwithtrend.com/Article/28621 两台小型机组成的RAC环境,在用topas查看资源使用情况时,发现一台机器的非计算内存占用过高: MEMOR ...