FormData 表单对象概述

FormData 表单常用方法

添加、获取数据

修改、删除数据

判断是否含有指定 key

entries 遍历数据

forEach 循环取值

Json 与 FromData 相互转换

前后台 formData 数据传输示例

FormData 表单对象概述

1、FormData 是 Html5 新加进来的一个类,可以模拟表单数据

2、利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件，可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件

3、可以先通过 new 关键字创建一个空的 FormData 对象，然后使用 append() 方法向该对象里添加字段（字段的值可以是一个 File对象或者字符串，剩下其他类型的值都会被自动转换成字符串)，也可以 new 的同时直接传入表单对象，从而创建有值的FormData对象。

构造函数	解释
FormData (optional HTMLFormElement form)	(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {/**新建空的 FormData 对象*/let formData1 = new FormData();formData1.append("name", "华安");console.log(formData1.has("name") + ":" + formData1.get("name"));//输出：true:华安/**根据表单创建 FormData 对象，注意构造器参数是DOM对象，而不是JQuery对象*/let formData2 = new FormData($("#form")[0]);console.log(formData2.get("name"));//默认输出：请输入姓名...console.log(formData2.get("age"));//默认输出：0console.log(formData2.get("info"));//默认输出：请输入描述...console.log(formData2.get("address"));//因为不存在，所以输出：null});});</script>
</head>
<body>
<button id="refresh">刷新</button>
<form id="form" method="post">姓名：<input type="text" name="name" value="请输入姓名...">年龄：<input type="number" name="age" value="0">描述：<textarea name="info">请输入描述...</textarea>
</form>
</body>
</html>

FormData 表单常用方法

添加、获取数据

1、添加数据：通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

void append(DOMString name, DOMString value)
name 表单元素名称，已经存在时，以数组形式追加值
value 表单元素要传递的值

2、获取数据：可以通过 get(key)、getAll(key) 来获取对应的 value

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {let formData = new FormData();formData.append("name", "华安");formData.append("number", 9527);formData.append("name", "宁王");console.log(formData.get("name"));//默认取第一个，输出：华安console.log(formData.get("number"));//输出：9527console.log(formData.getAll("name"));//输出：["华安", "宁王"]console.log(formData.getAll("name")[0]);//输出：华安console.log(formData.getAll("name")[1]);//输出：宁王});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>

修改、删除数据

1、修改数据：可以通过 set(key, value) 来设置修改数据，如果指定的 key 不存在则会新增一条，如果存在，则会修改对应的value值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {let formData = new FormData();formData.append("name", "华安");console.log(formData.get("name"));//输出：华安formData.set("name", "宁王");console.log(formData.get("name"));//输出：宁王formData.set("age", 35);console.log(formData.get("age"));//输出：35});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>

2、删除数据：通过 delete(key)，来删除数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {let formData = new FormData();formData.append("name", "华安");console.log(formData.has("name")+":"+formData.get("name"));//输出：true:华安formData.delete("name");console.log(formData.has("name")+":"+formData.get("name"));//输出：false:null});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>

判断是否含有指定 key

1、可以通过 has(key) 来判断是否对应的 key 值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {let formData = new FormData();formData.append("name", "华安");console.log(formData.has("name")+":"+formData.get("name"));//输出：true:华安console.log(formData.has("age")+":"+formData.get("age"));//输出：false:null});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>

entries 遍历数据

1、可以通过 entries() 来获取一个迭代器，然后遍历所有的数据，迭代器规则：

1）每调用一次 next() 返回一条数据对象，数据的顺序与添加的顺序一致
2）返回的数据对象，当其done属性为true时，说明已经遍历完所有的数据，value 值为 undefined
3）返回的数据对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key对应多个value，则会多对key/value返回

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let formData = new FormData();formData.append("k1", "v1");formData.append("k1", "v2");formData.append("k2", "v1");eachFormData(formData);/*** 遍历 FormData 表单数据对象* @param formData*/function eachFormData(formData) {let entriesObj = formData.entries();let loopEntrie = entriesObj.next();let loopValue = "";/** done 为 true 时 表示已经遍历完毕*/while (!loopEntrie["done"]) {//loopEntrie对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为valueloopValue = loopEntrie["value"];console.log(loopValue[0] + "=" + loopValue[1]);loopEntrie = entriesObj.next();}}</script>
</head>
<body>
</body>
</html>

forEach 循环取值

    <script type="text/javascript">var formData = new FormData();formData.set("code", "200");formData.set("msg", "请求成功");formData.set("data", null);//forEach 循环formData.forEach(function (value, key) {console.log(key + "=" + value);});</script>

Json 与 FromData 相互转换

    <script type="text/javascript">/*** json 对象转 FormData 对象* @param jsonObj* @return {FormData}*/function jsonObjToFormObj(jsonObj) {var formData = new FormData();Object.keys(jsonObj).forEach(function (key) {formData.append(key, jsonObj[key]);});return formData;}//转换测试var jsonObj = {"code": "200", "msg": "请求成功", "data": null};var formData = jsonObjToFormObj(jsonObj);formData.forEach(function (value, key) {console.log(key + "=" + value);});</script>

    <script type="text/javascript">//测试数据var formData = new FormData();formData.set("code", "200");formData.set("msg", "上传成功");formData.set("data", null);//formData 转 json 对象var jsonObj = {};formData.forEach(function (value, key) {jsonObj[key] = value;});console.log(jsonObj);</script>

前后台 formData 数据传输示例

1、FormData 实际就是一个表单对象，所以可以用来直接封装表单数据，前台页面如下：

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){$("#uploadButton").click(function(){/** 模拟一个简单的用户信息提交* 这些数据平时都会放在页面让用户填写的* 下面完全等价于<form>标签**/var formData = new FormData();formData.append("name","李四");formData.append("age",33);formData.append("sex",true);/**下面两个设置很关键，和平时使用时略有不同* contentType: false->告诉jQuery不要去设置Content-Type请求头* processData: false->告诉jQuery不要去处理发送的数据*/$.ajax({url : "resourceController/test.action",type: 'POST',data: formData,dataType:"JSON",contentType: false,processData: false,success : function(data) {console.log(JSON.stringify(data));alert("上传成功")},error : function(data) {console.log(JSON.stringify(data));alert("上传失败");}});});});</script>
</head>
<body>
<input type="button" id="uploadButton" value="提交">

2、后台代码

/** 测试使用，请删除* 后台接收和平时没有任何区别，可以单个命名接收，或者POJO对象直接自动封装接收* 下面是SpringMVC的接收方式，参数名必须与前台表单的name属性一致* @param name* @param age* @param sex* @param response*/
@RequestMapping("test.action")
public void test(String name,String age,String sex, HttpServletResponse response) {try {response.setContentType("text/json;charset=UTF-8");PrintWriter printWriter = response.getWriter();JsonObject jsonObject = new JsonObject();System.out.println(name+":"+age+"::"+sex);printWriter.write(jsonObject.toString());printWriter.flush();printWriter.close();} catch (IOException e) {e.printStackTrace();}
}

测试结果

H5 FormData 表单数据对象详解与 Json 对象相互转换相关推荐

JavaScript对象详解，js对象属性的添加
目录一,什么是对象? 二,创建一个对象三,对象的嵌套四,对象的属性与修改 1,使用点.运算符 2,使用[]符号 3,修改属性五,给对象添加属性六,查看与删除对象的属性 1,使用Object. ...
JavaScript Date对象详解以及时间戳和时间的相互转换
目录一.Date对象详解 1.Date对象 2.创建Date对象 3.Date对象属性 4.Date对象方法 5.Date对象的应用(节流函数时间戳写法) 二.时间戳和时间的相互转换 1.时间转换为 ...
JavaScript对象详解
转载请注明预见才能遇见的博客:https://my.csdn.net/ 原文地址:https://blog.csdn.net/weixin_42787326/article/details/81297 ...
JS window对象详解
JS window对象详解 1.window对象 2.窗口操作打开窗口关闭窗口 3.对话框 confirm prompt 4.定时器 setTimeout和clearTimeout setInte ...
H5的新特性及API详解（很惊人）
H5的新特性及API详解(很惊人) 2017-01-20 17:00 4057人阅读评论(0) 收藏举报分类: h5(11) js函数(64) js技巧(15) 版权声明:本文为博主原创 ...
【ES6】Promise对象详解
[ES6]Promise对象详解一.Promise对象的含义二.Promise对象的用法三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载查看更多ES6教学文章: 参 ...
Javascript中的Document对象详解
Document对象详解 document 文挡对象 - JavaScript脚本语言描述 -------------------------------------------- ...
Multipart/form-data POST文件上传详解
Multipart/form-data POST文件上传详解理论简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...
Hibernate Criteria对象详解(条件查询)
Hibernate Criteria对象详解 2014-9-1 16:21| 发布者: 传智特刊| 查看: 7290| 评论: 0 摘要: Hibernate框架是目前JavaEE软件开发的企业主流框 ...
JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...

H5 FormData 表单数据对象详解与 Json 对象相互转换

FormData 表单对象概述

FormData 表单常用方法

添加、获取数据

修改、删除数据

判断是否含有指定 key

entries 遍历数据

forEach 循环取值

Json 与 FromData 相互转换

前后台 formData 数据传输示例

H5 FormData 表单数据对象详解与 Json 对象相互转换相关推荐

最新文章

热门文章

H5 FormData 表单数据对象详解 与 Json 对象相互转换

FormData 表单对象概述

FormData 表单常用方法

添加、获取数据

修改、删除数据

判断是否含有指定 key

entries 遍历数据

forEach 循环取值

Json 与 FromData 相互转换

前后台 formData 数据传输示例

H5 FormData 表单数据对象详解 与 Json 对象相互转换相关推荐

最新文章

热门文章

H5 FormData 表单数据对象详解与 Json 对象相互转换

H5 FormData 表单数据对象详解与 Json 对象相互转换相关推荐