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 数据转化为 json 数据的更多相关文章
- 将Dictionary序列化为json数据 、json数据反序列化为Dictionary
需要引用System.Web.Extensions dll类库 /// <summary> /// 将json数据反序列化为Dictionary /// </summary> ...
- JSONArray ja = JSONArray.fromObject(list);//特殊类 用于将list转化为JSON 数据并返回 out.print(ja);
JSONArray ja = JSONArray.fromObject(list);//特殊类 用于将list转化为JSON 数据并返回out.print(ja);
- 把数据转化为JSON格式用ajax进行前后端交互
接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...
- 用ajax获取后台数据,返回json数据,怎么在前台使用?
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 玩转Web之Json(三)-----easy ui怎么把前台显示的dataGird中的所有数据序列化为json,返回到后台并解析
最近做一个项目时,需要在dataGird中插入<input>,即文本输入框,当点击提交时,需要把文本框里填的数据返以及其他列的一些信息以json数组的格式返回到后台,虽然我实现了该功能,但 ...
- php array转化为utf-8编码以便于转化为json数据
php中转化为json时,字符串或数组编码必须为utf-8编码. 在网上找到了一个方法可以比较简单的转化,在此记录: 利用var_export()和eval()方法var_export():输出或返回 ...
- XML 数据请求与JSON 数据请求
(1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...
- js声明json数据,打印json数据,遍历json数据
1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...
随机推荐
- Google Play内购测试
Google Play内购测试 最近项目做海外版本,接入Google wallet支付后,测试验证比较繁琐,故记录一下. Google wallet支付方式接入完成后,需要按照如下步骤设置,才可以进行 ...
- 为什么Sql Server的查询有时候第一次执行很慢,第二次,第三次执行就变快了
老外提问: Hi, I have an sql query which takes 8 seconds in the first run. The next run there after takes ...
- angular、jquery、vue 的区别与联系
angular和jquery的区别 angular中是尽量避免操作DOM, angular是基于数据驱动, 适合做数据操作比较繁琐的项目,angular适用于单页面开发,是一个比较完善的mvvm框架, ...
- RecyclerView使用技巧(item动画及嵌套高度适配解决方案)
原文地址 · Frank-Zhu http://frank-zhu.github.io/android/2015/02/26/android-recyclerview-part-3/?utm_sou ...
- Python实例--12306的抢票功能
基础知识学习 目标: 通过python程序实现自动登录下单功能 知识点: Selenium + 云打码 + Python 学习链接: 1. Python学习--Selenium模块 2. Python ...
- 乘风破浪:LeetCode真题_028_Implement strStr()
乘风破浪:LeetCode真题_028_Implement strStr() 一.前言 这次是字符串匹配问题,找到最开始匹配的位置,并返回. 二.Implement strStr() 2.1 ...
- 读高性能JavaScript编程 第四章 Conditionals
if else 和 switch && 递归 if else 和 switch 一般来说,if-else 适用于判断两个离散的值或者判断几个不同的值域.如果判断多于两个离散 ...
- 一、JSP九大内置对象 二、JAVAEE三层架构和MVC设计模式 三、Ajax
一.JSP九大内置对象###<1>概念 不需要预先申明和定义,可以直接在jsp代码中直接使用 在JSP转换成Servlet之后,九大对象在Servlet中的service方法中对其进行定义 ...
- 模拟的confirm
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- 让sublime text3支持Vue语法高亮显示[转]
1.准备语法高亮插件vue-syntax-highlight. 下载地址:https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue ...