FormData 数据转化为 json 数据

简介: 两种方法 用户: 密码: // 版本二(箭头语法)var convert_FormData_to_json2 = function (formData) { var objData = {}; formData.

两种方法

<!-- 实例:将 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>

效果图

打开浏览器控制台

目录
相关文章
|
XML JSON 人工智能
Error while extracting response for type [class xxx] and content type application/xml;charset=UTF-8
Error while extracting response for type [class xxx] and content type application/xml;charset=UTF-8
2774 0
|
网络协议 应用服务中间件 网络安全
2024阿里云免费版SSL证书申请流程,跟着教程一步步,非常简单!
2024年最新阿里云免费SSL证书申请流程,品牌为Digicert,每个阿里云账号可免费申请20张单域名证书,免费时长为3个月。申请流程包括登录数字证书管理服务控制台、创建证书、域名验证和下载证书。详情请参考阿里云官方页面。
6357 2
|
存储 Java
Java——图书管理系统
该文档详细介绍了一个图书管理系统的设计与实现。系统包含普通用户和管理员两种角色,通过书架操作图书,如添加、查找、借阅、归还及删除图书等功能。文档展示了各个功能的具体代码实现,并使用继承和接口等方式优化了系统结构。通过多态技术实现了不同用户角色调用相应功能。整体设计清晰,逻辑严谨,便于理解和实现。
853 18
Java——图书管理系统
|
开发工具 对象存储 git
|
Python
VsCode集成Python开发环境
VsCode 环境下构建 Python 开发环境
658 0
VsCode集成Python开发环境
|
传感器 网络协议 网络架构
计算机网络基础教程:拓扑
【4月更文挑战第5天】
2315 9
 计算机网络基础教程:拓扑
|
C# 图形学 数据安全/隐私保护
Unity数据加密☀️ 二、使用Rider将C#代码生成DLL文件
Unity数据加密☀️ 二、使用Rider将C#代码生成DLL文件
|
Java API
解决HTTP 400 Bad Request错误的方法
解决HTTP 400 Bad Request错误的方法
|
NoSQL Java Redis
SpringBoot整合Redis及StringRedisTemplate的使用
SpringBoot整合Redis及StringRedisTemplate的使用
520 0
|
消息中间件 移动开发 NoSQL
一套完善的H5商城开源了,绝无套路
waynboot-mall 是一套全部开源的微商城,包含三个项目:运营后台、H5 商城和后端接口。实现了一套完整的商城业务,有首页展示、商品分类、商品详情、sku 详情、商品搜索、加入购物车、结算下单、商品评论等一系列功能。商城前后台项目源码全部开源,绝无套路。技术上基于最新得 Springboot3.1,整合了 Redis、RabbitMQ、ElasticSearch 等常用中间件,根据博主多年线上项目实战经验总结开发而来不断优化、完善。
714 2

热门文章

最新文章