两种方法

<!-- 实例:将 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 数据转化为 json 数据的更多相关文章

  1. 将Dictionary序列化为json数据 、json数据反序列化为Dictionary

    需要引用System.Web.Extensions  dll类库 /// <summary> /// 将json数据反序列化为Dictionary /// </summary> ...

  2. JSONArray ja = JSONArray.fromObject(list);//特殊类 用于将list转化为JSON 数据并返回 out.print(ja);

    JSONArray ja = JSONArray.fromObject(list);//特殊类 用于将list转化为JSON 数据并返回out.print(ja);

  3. 把数据转化为JSON格式用ajax进行前后端交互

    接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...

  4. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  5. Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 玩转Web之Json(三)-----easy ui怎么把前台显示的dataGird中的所有数据序列化为json,返回到后台并解析

    最近做一个项目时,需要在dataGird中插入<input>,即文本输入框,当点击提交时,需要把文本框里填的数据返以及其他列的一些信息以json数组的格式返回到后台,虽然我实现了该功能,但 ...

  7. php array转化为utf-8编码以便于转化为json数据

    php中转化为json时,字符串或数组编码必须为utf-8编码. 在网上找到了一个方法可以比较简单的转化,在此记录: 利用var_export()和eval()方法var_export():输出或返回 ...

  8. XML 数据请求与JSON 数据请求

    (1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...

  9. js声明json数据,打印json数据,遍历json数据

    1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...

随机推荐

  1. 带你从零学ReactNative开发跨平台App开发(二)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  2. PRD文档怎么写

    昨天学习PMP的相关文档,正好看到里面讲的PRD文档是怎么写的 就把一些学习过程,思维方式,还有用到的工具给记录下来 方便自己以后需要的时候,再去查阅,再读这个教程的时候,我顺便用脑图画了一下 脑图工 ...

  3. Python图像识别(聚类)

    # -*- coding: utf-8 -*- """ Created on Fri Sep 21 15:37:26 2018 @author: zhen "& ...

  4. .NET笔试题集(四)

    转载于:http://www.cnblogs.com/ForEvErNoME/archive/2012/09/10/2678727.html 1.请你简单的说明数据库建立索引的优缺点 使用索引可以加快 ...

  5. TiDB数据库集群安装以及注意事项

    今天尝试安装tidb集群.详细的安装步骤我们参考:https://pingcap.com/docs-cn/op-guide/ansible-deployment/ . 不过安装之前需要一些注意事项. ...

  6. 2019 wannafly winter camp

    2019 wannafly winter camp Name Rank Solved A B C D E F G H I J K day1 9 5/11 O O O O O day2 5 3/11 O ...

  7. C# MVC 使用 CKEditor图片上传 提示“不正确的服务器响应”

    重点:看一下你使用的CKEditor版本 过程: 后台需要一款富文本编辑器.经过挑选后,最后选择了FCKEditor 的升级版 CKEditor .在官网下载了4.10.1版本. 经过一番配置后,富文 ...

  8. Angular2学习笔记(1)——Hello World

    1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于 ...

  9. pytorch 绘制训练曲线;服务器端训练,本地浏览器显示,本地打不开;tensorboard端口被占

    代码里面用tensorboard保存了训练的日志在logs目录里面 用tensorboard命令打开日志目录:tensorboard --logdir="./logs/" 会显示一 ...

  10. jupyter中添加conda环境

    安装完Anaconda利用conda创建了虚拟环境,但是启动jupyter notebook之后却找不到虚拟环境. 实际上是由于在虚拟环境下缺少kernel.json文件,解决方法如下: 首先安装ip ...