FormData 数据转化为 json 数据

简介:

两种方法

<!-- 实例:将 FormData 转化为 json -->

<meta charset="utf-8"/>

<form enctype='application/json' method="post">
    <label>用户:</label>
    <input type="text" name="user"></br>
    <label>密码:</label>
    <input type="texteara" name="password"></br>

    <input type="submit" value="提交">
</form>



<script>

// 版本二(箭头语法)
var convert_FormData_to_json2 = function (formData) {
    var objData = {};
    
    formData.forEach((value, key) => objData[key] = value);
    
    return JSON.stringify(objData);
};

// 版本一
var convert_FormData_to_json = function (formData) {
    var objData = {};
    
    for (var entry of formData.entries()){
        objData[entry[0]] = entry[1];
    }
    return JSON.stringify(objData);
};

// 显示根据Form生成的json数据
var formobj = document.querySelector('form');
formobj.addEventListener('submit', function(event){
    event.preventDefault();

    console.log(convert_FormData_to_json(new FormData(formobj)));
    console.log(convert_FormData_to_json2(new FormData(formobj)));

}, false);
</script>

效果图

打开浏览器控制台
formdata_to_json.bmp

本文转自罗兵博客园博客,原文链接:http://www.cnblogs.com/hhh5460/p/6599178.html ,如需转载请自行联系原作者
相关文章
|
1月前
|
存储 JSON Apache
揭秘 Variant 数据类型:灵活应对半结构化数据,JSON查询提速超 8 倍,存储空间节省 65%
在最新发布的阿里云数据库 SelectDB 的内核 Apache Doris 2.1 新版本中,我们引入了全新的数据类型 Variant,对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列,彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。
揭秘 Variant 数据类型:灵活应对半结构化数据,JSON查询提速超 8 倍,存储空间节省 65%
|
1天前
|
JSON 数据可视化 定位技术
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
5 0
|
14天前
|
存储 JSON JavaScript
「Python系列」Python JSON数据解析
在Python中解析JSON数据通常使用`json`模块。`json`模块提供了将JSON格式的数据转换为Python对象(如列表、字典等)以及将Python对象转换为JSON格式的数据的方法。
29 0
|
18天前
|
存储 JSON 数据挖掘
python逐行读取txt文本中的json数据,并进行处理
Python代码示例演示了如何读取txt文件中的JSON数据并处理。首先,逐行打开文件,然后使用`json.loads()`解析每一行。接着,处理JSON数据,如打印特定字段`name`。异常处理包括捕获`JSONDecodeError`和`KeyError`,确保数据有效性和字段完整性。将`data.txt`替换为实际文件路径运行示例。
14 2
|
1月前
|
JSON 数据格式
糊涂工具类(hutool)post请求设置body参数为json数据
糊涂工具类(hutool)post请求设置body参数为json数据
61 1
|
1月前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
11 0
|
1月前
|
JSON 并行计算 API
使用CJSON/Nlohmann:快速简便地在C/C++中处理JSON数据
使用CJSON/Nlohmann:快速简便地在C/C++中处理JSON数据
147 0
|
7月前
|
JSON Java Maven
在Java中,我们可以使用第三方库来解析JSON数据
在Java中,我们可以使用第三方库来解析JSON数据。这里以常用的Jackson库为例,演示如何解析JSON数据。
58 1
|
4月前
|
SQL JSON 关系型数据库
【SQL编程】MySQL 5.7.28 版本使用 SQL 直接解析 JSON 字符串(判断是否是合法JSON类型+文本深度+文本长度+值类型+keys获取+值获取+不同深度数据获取)
【SQL编程】MySQL 5.7.28 版本使用 SQL 直接解析 JSON 字符串(判断是否是合法JSON类型+文本深度+文本长度+值类型+keys获取+值获取+不同深度数据获取)
54 0
|
4月前
|
JSON 数据格式
这个错误是由于在解析JSON数据时出现了问题。你可以尝试使用`try-except`语句来捕获异常
这个错误是由于在解析JSON数据时出现了问题。你可以尝试使用`try-except`语句来捕获异常
38 2