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

最新推荐文章于 2024-08-15 21:17:34 发布
最新推荐文章于 2024-08-15 21:17:34 发布
阅读量5.6k 收藏 10
点赞数 1
分类专栏： Html 5 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangmx1993328/article/details/79947525
版权

目录

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"));//默认输出：0
                console.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"));//输出：9527
                console.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为value
                loopValue = 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();
    }
}

测试结果

 

蚩尤后裔-汪茂雄
关注
专栏目录
使用JQuery实现从JSON对象转换为form提交数据
03-31
要将JSON对象转换为适合表单提交的数据格式，我们需要遍历JSON对象的键值对，构建一个字符串形式的URL编码参数。这可以通过遍历JSON对象并使用`$.param()`函数实现。`$.param()`是jQuery内部用于URL编码参数的方法...
FormData详解
热门推荐
weixin_46058921的博客
01-08 5万+
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果表单 enctype 属性设为 multipart/form-data ，则会使用表单的 submit() 方法来发送数据，从而发送数据具有同样形式。 构造函数 FormData()构造函数用于创建一个新的FormData对象。 var formData = new FormData(form)
前后端传参：掌握FormData并解决form-data类型传参问题
qq_45796592的博客
12-18 1万+
掌握FormData并解决form-data类型传参问题
深入理解 JavaScript 的 FormData 对象：使用与实践
最新发布
2402_85762143的博客
08-15 1136
FormData对象是Level 2 规范的一部分，用于创建键值对集合，这些键值对可以被发送到服务器。它通常用于通过 JavaScript 动态构建表单数据，特别是当涉及到文件上传时。
什么是formData
chengyou_的博客
05-23 1794
什么是formData 可以用作：序列化表 使用： var formData=new FormData() 定义一个表单，定义上name属性 <form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密码 <input type="submit" value="提交"> &
前端 之 FormData对象浅谈
weixin_45092437的博客
05-14 5539
FormData提供了一种以 `key/value`键值对集合表示表单数据的数据构造方式，通过该方式我们可以将`file`、`blob`等不易传输的数据通过 `ajax` 请求轻松的发送到服务器端。 ​ 当使用`FormData` 对象作为参数时，无需手动设置请求的编码类型，浏览器会自动将请求的编码类型`Content-type`设置为`multipart/form-data`。
使用js FormData传文件流，传json（重点） 可以处理动态上传多附件处理
yuting0787的博客
08-23 3277
先介绍js的FormData，FormData是XMLHttpRequest Level 2新增的一个接口，利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用ajax方法来异步的提交这个"表单".使用FormData的最大优点就是我们可以异步上传一个二进制文件. 这里说下FormData的append方法， 给当前FormData对象添加一...
Vue 实现把表单form数据 转化成json格式的数据
10-16
在Vue.js开发中，处理表单数据是常见的需求，尤其是当需要将表单数据转换为JSON格式以便于发送到服务器或者进行其他处理时。本文将详细介绍如何在Vue中实现这一功能。 首先，我们要理解表单数据通常是通过HTML的`...
PHP使用HTML5 FormData对象提交表单操作示例
10-16
在`send`函数中，创建了FormData对象，并从页面的表单元素中获取数据，然后通过XMLHttpRequest对象发送到服务器。在服务器端，PHP脚本通过`$_POST`全局数组接收这些数据，并通过`print_r`函数打印出来。 ### 总结 ...
JS FormData对象使用方法实例详解
10-15
通常，`FormData`对象与`XMLHttpRequest`或`fetch` API结合使用，用于异步提交表单数据或上传文件。例如，使用`fetch`发送POST请求： ```javascript fetch("http://example.com/api/upload", { method: "POST", ...
传递参数格式为form-data与json的区别，以及ajax、axios、fetch请求的方式
qq_35046569的博客
09-18 2万+
标题前端请求后台接口时，传递参数格式为form-data与json的区别 一、form-data格式 请求头： 1.application/x-www-form-urlencoded 表单格式提交数据，通过form标签的action属性，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据 html: <form id="myform" onsubmit="return false;"> 用户名：<i
HTML5----FormData实例用法
余农场主
06-26 2825
在网页与后台的交互中，用的最多的网络交互方式之一就是ajax，ajax 是免刷新页面就能从进行post与get方式的提交表单和获取服务端数据，但是在原先的ajax中，是不能携带文件上传的，但是由于h5里面的FormData的出现，让ajax可以直接在网页里面异步上传文件
好程序员web前端培训分享FormData 简单介绍
qq_35970166的博客
04-28 381
​好程序员web前端培训分享FormData 简单介绍，FormData是Ajax 2.0对象用以将数据编译成键值对，以便于XMLHttpRequest来发送数据。XMLHttpRequest Level 2提供的一个接口对象，可以使用该对象来模拟和处理表单并方便的进行文件上传操作。 我们打印这个构造函数看一眼 ƒ FormData() arguments: null caller: null l...
掌握 form-data：提升数据传输安全性
LiamHong_的博客
04-29 701
form-data是一种编码格式，主要用于在HTTP请求中发送数据，尤其适用于在客户端与服务器间传输较为复杂的表单内容，如文字输入及文件上传。它支持多种类型的内容，并在上传文件时表现出高效的处理能力。掌握form-data格式的使用对于进行网络通信和数据传输至关重要。通过本文的介绍和 Apifox 工具的辅助，你可以更深入地理解如何有效利用此格式处理复杂的数据上传需求。
浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉
Shids_的博客
02-13 1万+
浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉
[vue h5]钉钉内嵌的h5，上传文件、修改页面title问题
清浅就是我的博客
06-28 3024
做钉钉h5开发遇到的一些踩坑经历
FormData 解析
weixin_36723038的博客
01-28 4374
FormData 很多时候，在 post 提交数据时我们常采用 application/json、application/x-www-form-urlencoded 等类型，也确实能够覆盖到大部分的场景，但是有一些场景下，比如文件上传的时候，就不算是好的解决方案了，application/json 作为请求头 Content-Type 字段值时，表示告知服务端参数是序列化后的 JSON 字符串，所以一般在传参时都会用 JSON.stringify 序列化一下，且浏览器对 JSON.stringify API
FormData对象
weixin_30315905的博客
04-03 217
FF4中增加了一个很有意思的对象，FormData。通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。但当我们使用Ajax提交时，这过程就要变成人工的了。因此，FormData对象的出现可以减少我们一些工作量。 想得到一个FormData对象，很简单：...
前端基础二：fromData使用详解
2201_75705263的博客
10-14 1625
把属性和属性值进行数组结合，高效传输FormData的主要用途有两个：1、将form元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件。
javascript 将表单 数据定义一个json对象
06-10
可以使用 JavaScript 中的 FormData 对象来获取表单数据，然后将其转换为 JSON 对象。以下是一个示例代码： ```javascript // 获取表单元素 const form = document.querySelector('form'); // 创建 FormData 对象 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蚩尤后裔-汪茂雄

芝兰生于深林，不以无人而不芳。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值