首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何根据普通JavaScript中的输入名称创建表单输入值的嵌套对象(JSON)?

在普通JavaScript中,可以通过以下方式根据输入名称创建表单输入值的嵌套对象(JSON):

  1. 首先,创建一个空的对象,用于存储表单输入值:
代码语言:javascript
复制
var formData = {};
  1. 获取表单中的所有输入元素,可以使用document.querySelectorAll方法选择所有的输入元素:
代码语言:javascript
复制
var inputs = document.querySelectorAll('input');
  1. 遍历所有的输入元素,获取输入名称和对应的值,并将其添加到嵌套对象中:
代码语言:javascript
复制
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  var name = input.name;
  var value = input.value;

  // 使用递归方式创建嵌套对象
  createNestedObject(formData, name, value);
}

function createNestedObject(obj, key, value) {
  var keys = key.split('.');
  var lastKey = keys.pop();

  keys.reduce(function (nestedObj, currentKey) {
    if (!nestedObj[currentKey]) {
      nestedObj[currentKey] = {};
    }
    return nestedObj[currentKey];
  }, obj)[lastKey] = value;
}
  1. 最后,formData对象就是根据输入名称创建的表单输入值的嵌套对象(JSON)。

这种方法可以处理输入名称中包含点号的情况,将其转换为嵌套对象的属性。例如,对于输入名称user.name,将创建一个嵌套对象{ user: { name: value } }

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整配置,支持多种操作系统和应用场景。产品介绍链接地址:腾讯云云服务器
  • 腾讯云云数据库MySQL:提供高性能、可扩展的关系型数据库服务,支持自动备份、容灾、监控等功能,适用于各种规模的应用场景。产品介绍链接地址:腾讯云云数据库MySQL
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web 框架替代方案

面向表单“数据绑定” 在大量使用 JavaScript 单页应用(single-page application,SPA)时代到来之前,表单创建包含用户输入 Web 应用主要方式。...,只接收普通对象。...请注意,它遵循 CHACHA 准则。 有两个界面,一个是动作,一个是观察。 所有的参数类型都是基元或普通对象(很容易翻译成 JSON)。 所有的函数都返回 void。...,其中有所有的全局输入和按钮,还有一个新表单用于创建一个新任务。...当任务被添加时,这个表单将通过克隆模板内容而被重复。 隐藏输入表示不直接显示数据,但用于样式设计和选择。 注意这个 DOM 是如何简洁。它没有在其元素散布类。

2.5K10

创建一个欢迎 cookie 利用用户在提示框输入数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 信息发出欢迎信息。…

创建一个欢迎 cookie 利用用户在提示框输入数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 信息发出欢迎信息。...cookie 是存储于访问者计算机变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript创建和取回 cookie 。...欢迎词。而名字则是从 cookie 取回。 密码 cookie 当访问者首次访问页面时,他或她也许会填写他/她们密码。密码也可被存储于 cookie 。...当他们再次访问网站时,密码就会从 cookie 取回。 日期 cookie 当访问者首次访问你网站时,当前日期可存储于 cookie 。...日期也是从 cookie 取回

2.6K10

使用React hooks处理复杂表单状态数据

也许您还必须根据当前状态更新表单状态,例如toggle切换按钮。 现在,如果您对每个单独表单字段使用useState,那么您可以根据当前状态计算新状态。 ?...useState更新函数可以基于prev参数计算新状态 另外,如何更新嵌套状态如address.addressLine1,address.pinCode。...如果updateArg是一个普通Javascript对象,那么有两种情况。 1:该对象没有_path和_value属性,因此是一个普通更新对象,就可以像使用this.setState一样。...在字符串形式,例如:'address.pinCode'或表示路径['address','pinCode']数组。 我们如何使用此类路径表示来更新对象嵌套字段?...我们将使用lodashset方法。它接受路径表单作为更新和对象有效输入。 ? 但是,set方法就地改变对象并且不返回新副本,但在React世界,更改检测取决于Immutability(不可变)。

3.3K20

前端系列教学 - HTML基础

如果只是简简单单用HTML, CSS, JavaScript做出一个可以进行简单交互网页并不难,如果学快的话,一天工夫就可以从零开始学这做出一个像样网页。 但是前端服务对象是用户。...使用标签可以创建一个表单表单用途简单来说就是收集信息,虽然涉及到了后端交互,但是在这一章我们只需要关心如何在 HTML 里构建表单页面效果。...name属性定义单选按钮组 (具有相同名称单选按钮 属于同一组)。 value属性设置单选按钮。...### 按钮 在 标签 有三种按钮类型: 普通按钮 button 提交按钮 submit 重置按钮 reset #### 普通按钮 button: value属性会显示在按钮之上。...在之后学了 JavaScript 我们可以为按钮绑定相应事件。 提交按钮 submit & 重置按钮 reset: 提交 和 重置按钮 都可以被看成是具备特殊功能普通按钮。

7.1K110

【ASP.NET Core 基础知识】--MVC框架--Views和Razor语法

以下是如何创建和使用部分视图基本步骤: 创建部分视图 在Views文件夹创建一个名为Shared文件夹: /Views /Shared 在Shared文件夹创建部分视图文件,例如...这个映射过程是自动进行,ASP.NET Core框架根据请求数据类型、名称和模型对象属性进行匹配。...以下是一些常见技巧: 模型绑定前缀 在处理复杂数据结构(例如嵌套对象或集合)时,可以使用模型绑定前缀来指定数据应该绑定到模型哪个属性。这在处理表单数组或嵌套对象时非常有用。...-- 表单内容将在这里定义 --> 输入元素 在表单,可以使用多种输入元素,根据用户需要收集数据类型选择合适元素。...,通过它们组合可以创建各种类型表单,用于接收用户输入并提交到服务器。

22320

JavaWeb之分页实现——基于Mysql(通用)

init和destory方法只会运行一次    JunitsetUp和tearDown方法是根据方法数量来决定  首先我是跟着我自己eclipse文件来发代码!  ...* -----> * 将普通SQL语句转换成查询分页结果集SQL语句 * @param sql 普通SQL * @param pageBean 分页对象(包含当前页码和每页条数,...continue; //获取请求参数对应,String[] String[] values=entry.getValue(); //遍历value for (String...(请求)一次 效果图如下: 注1:不能将分页表单嵌套到其它表单,否则不能提交表单!!!        ...不能将分页表单嵌套到其它表单,否则不能提交表单!!!         不能将分页表单嵌套到其它表单,否则不能提交表单!!! 今天就分享到这里啦! 代码就是提供一个思路小伙伴们可以参考一下!

1.4K30

form表单提交几种方式

还有一种情况是ajax方法定义了 dataType:"json"属性,就一定要返回标准格式json字符串,要不jQuery1.4+以上版本会报错,因为不是用eval生成对象了,用JSON.parse...text/plain method 作用:规定用于发送 form-data HTTP 方法 常用:get / post name 作用:规定表单名称。...当自动完成开启,浏览器会基于用户之前输入自动填写。 提示:您可以把表单 autocomplete 设置为 on,同时把特定输入字段设置为 off,反之亦然。...如果设置,则规定允许用户在 元素输入一个以上。 multiple 属性适用于以下输入类型:email 和 file。...placeholder 属性规定用以描述输入字段预期提示(样本或有关格式简短描述)。 该提示会在用户输入之前显示在输入字段

6.4K20

2019年底前web前端面试题初级-web标准应付HR大多面试问题

浮动float,就是让元素脱离文档普通流,浮动在普通流之上。 浮动元素,根据它设置浮动方向向左或者向右,直到浮动元素外边缘遇到包含框,或是另一个浮动元素为止,可以让文本和内联元素环绕它。...为文本框指定一个可用选项列表,当用户在文本框输入信息时,会根据输入字符,自动显示下拉列表提示,供用户从中选择 pattern 用于验证表单输入内容 novalidate 当提交表单时候不会其进行验证...em为相对单位,基准点为父节点字体大小,em会根据父级元素大小而变化,但是如果嵌套了多个元素,要去计算,很容易出错,就有了rem。...工厂模式:提供创建对象接口 场景: 对象构造复杂,需要依赖具体环境创建不同实例,处理大量具有相同属性对象。...选择所有相同元素名称最后一个兄弟元素 :nth-child 匹配其父元素下第N个子或奇偶元素 表单对象属性 :enabled匹配所有可用元素 :disabled匹配所有禁用元素 :checked

2.3K50

Vue_Study07

从node.js创建http请求 支持Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF 浏览器创建XMLHttpRequests...get方法也可以把url参数提出来单独放到一个对象。 ​ axios 传递参数 get 传参 ​ 注意是 使用params 和 ?...格式将数据发送到后端,axios 也可以将数据以普通 表单数据 提交到后台。...` 是承载 xsrf token HTTP 头名称 xsrfHeaderName: 'X-XSRF-TOKEN', // 默认 // `onUploadProgress` 允许为上传处理进度事件...即 新建VueRouter 实例对象,并且为routes 属性进行赋值 // routes 需要配置全部路由信息,path 需要和路由链接to属性对应保持一致,componment则是组件名

14410

【JavaWeb基础】文件上传和下载(修订版)

】 调用解析器方法解析request对象,得到所有上传内容【list】 遍历list,判断每个对象是否是上传文件 如果是普通表单字段,得到字段名和字段 如果是上传文件,调用InputSteam方法得到输入流...对象 for(FileItem item : list){ if(item.isFormField()){ //得到普通输入项 String name = item.getFieldName...//设置upload编码 fileUpload.setHeaderEncoding("UTF-8"); 解决表单数据乱码,在获取表单时候,按照UTF-8编码来获取 String...for (FileItem fileItem : list) { //如果是普通输入项 if (fileItem.isFormField()) { //得到输入名称...得到装载上传文件路径,通过递归把所有的文件都查找出来(判断是否是文件就是递归出口),装载到Map集合 将Map集合传到前台做展示 用户点击下载时候,再根据原名来获取绝对路径 如果该资源是存在,就允许用户下载

69391

【不用框架】文件上传和下载

】 调用解析器方法解析request对象,得到所有上传内容【list】 遍历list,判断每个对象是否是上传文件 如果是普通表单字段,得到字段名和字段 如果是上传文件,调用InputSteam方法得到输入流...String name = item.getFieldName(); //得到输入名称 String value...//设置upload编码 fileUpload.setHeaderEncoding("UTF-8"); 解决表单数据乱码,在获取表单时候,按照UTF-8编码来获取 String...//如果是普通输入项 if (fileItem.isFormField()) { //得到输入名称...得到装载上传文件路径,通过递归把所有的文件都查找出来(判断是否是文件就是递归出口),装载到Map集合 将Map集合传到前台做展示 用户点击下载时候,再根据原名来获取绝对路径 如果该资源是存在,就允许用户下载

1.7K40

JavaScript 入门基础 - 变量 数据类型(二)

删除对象属性 2.8.5 JSON循环遍历 2.8.6 JSON字符串转换为 JavaScript 对象 ---- 1.变量 1.1 什么是变量 变量是用于存放数据容器,我们可以通过变量名获取存储在里面的数据...简单说数据类型就是数据类别型号。如:张三、19、age。 2.1.2 变量数据类型 变量是一种存储空间,它们有名字和类型,变量数据类型决定了如何将代表这些位存储到计算机内存。...// 普通变量一次只能存储一个 var age = 18; // 数组一次可以存储多个 var arr = [3,5,7,8]; 2.7.2 创建数组方式 js中有两种创建数组方式: 利用 new...2.8.2 JSON语法规则 数据为 键/ 对,包括字段名称 加 冒号,后面为 "name":"小明" 数据之间用逗号隔开 大括号用来保存对象,可以保存多个键值对 {"name":"小明", "gender...2.8.3 访问对象 访问JSON对象有两种方式,使用 .

3.8K40

【前端基础】JS基础学习笔记整理

JavaScript可以操作对象有下列三个来源: 1.浏览器环境和 HTML标签语句所构成现成对象(链接、图像、插件、HTML表单元素、浏览器细节等); 2.通过 JavaScript内置类所创建对象...表单当中会包含很多 Input对象,比如单行文本输入框(类型为 Text)、文本区域(类型为TextArea)、普通按钮(类型为 Button)、提交按钮(类型为 Submit)、重置按钮(类型为 Reset...在图 2例子,我们采用类型为 Button普通按钮对象来完成这种功能。...3.5.2 由JavaScript,在不同桢 (窗口 )间访问对象 如果一个浏览器显示内容包含多个(帧)Frame,在不同(帧)FrameWeb页如何通过JavaScript访问其他帧 Web...正则表达式可以让用户通过使用一系列特殊字符构建匹配模式,然后把匹配模式与数据文件、程序输入以及 WEB 页面的表单输入等目标对象进行比较,根据比较对象是否包含匹配模式,执行相应程序。

2.3K70

一个合格初级前端工程师需要掌握模块笔记

autofocus 当为某个表单控件增加该属性后,当浏览器打开这个页面, 这个表单控件会自动获得焦点 list 为文本框指定一个可用选项列表,当用户在文本框输 入信息时,会根据输入字符...em会根据父级元素大小而变化,但是如果嵌套了多个元素,要计算它大小,是很容易出错,这样就引申出了rem。...12, sex:"男" } 对象数据访问 //用.语法 obj.name //用[]语法 obj["name"] JSON json(JavaScript Object Notation),...在JavaScript所有函数对象,都存在一个属性,prototype,该属性对应当前对象原型。...工厂模式 工厂模式定义: 提供创建对象接口,意思就是根据领导(调用者)指示(参数),生产相应产品(对象)。 创建一个对象常常需要复杂过程,所以不适合在一个复杂对象

3.6K10

Vue 09.前后端交互

前后端交互模式 接口调用方式 原生ajax 基于jQueryajax fetch axios 异步 JavaScript执行环境是「单线程」 所谓单线程,是指JS引擎负责解释和执行JavaScript...then 返回普通:返回普通纸会直接传递给下一个then,通过then函数参数接收 .catch() 获取异常信息 .finally() 成功与否都会执行 function foo() {...:3000/json').then(function(data){ // return data.json(); // 将获取到数据使用 json 转换对象 return data.text.../ 就是根据当前ID去更新数组对应数据 this.books.some((item) => { if(item.id == this.id) { item.name...如果不存在 往后台里面添加图书名称 图书存在与否只需要修改submitFlag即可 watch: { name: async function(val) { // 验证图书名称是否已经存在

6K30

接口测试|Postman发送带参数Get请求

:postman会把URL参数自动解析到参数列表显示, 方便进行修改操作 json数据说明 JSON(JavaScript Object Notation)类似于XML,是一种数据报文交换格式,比如...Java产生了一个数据想要给JavaScript,则除了利用XML外,还可以利用JSON,JSON相比XML优势是表达起来更简单。...json有两种数据格式表示,如下: Map,也称为对象;{....}...简单说就是JavaMap,名称-形式给出,名称之间用“:” 隔开,两个Map之间用“,”隔开,一般表示形式如:{'key1':'value1','key2':'value2'} Array...就是普通意义上数组,一般形式如:'arr1','arr2','arr3' Map结构图示: 图片 Array结构图示: 图片 注意: (1)JSON数据结构只有两种 (2)可以嵌套表示,比如Array

1.5K20

HTML、CSS、JavaScript学习总结

另外在JavaScript对于对象属性和方法引用,有两种情况: – 该对象为静态对象,表示在引用该对象属性或方法时不需要为它创建实例; – 在引用该对象属性和方法时必须为它创建一个实例,叫做动态对象...Form对象包含有许多用于收集用户输入内容元素对象,例如,文本框、按钮等,通过这些元素对象,form将用户输入数据传递到服务器端进行处理。...事件响应调用函数doSubmit()进行验证,根据函数返回决定是否提交 • Form元素对象 form元素对象一般都可以与html标记一一对应。...文本框对象 • 文本框元素用于在表单输入字、词或一系列数字 • 可以通过将 HTML INPUT 标签 type 设置为“text”,以创建文本框元素 文本框对象 – 事件处理程序 文 本 框...,如果选中第一个返回0,第二个返回1,其他类推 表单验证 • JavaScript 最常见用法之一就是验证表单 • 对于检查用户输入是否存在错误和是否疏漏了必选项,JavaScript 是一种十分便捷方法

3K20

【ASP.NET Core 基础知识】--MVC框架--Models和数据绑定

通过实现 IModelBinder 接口,可以创建自定义绑定器,并在应用程序配置中注册它们。 复杂对象绑定: 数据绑定支持复杂对象,包括嵌套对象、集合和数组。...2.3 复杂数据绑定 复杂数据绑定涉及将复杂对象嵌套对象、集合或数组等数据结构映射到控制器动作方法参数或模型。...return View(); } 嵌套对象绑定: 在复杂对象嵌套其他对象也是常见场景,数据绑定会自动处理这种情况: public class Book { public string Title...return View(); } 这些例子展示了如何处理在ASP.NET Core MVC中进行复杂数据绑定,包括嵌套对象、集合和数组等不同类型数据结构。...-- 使用模型嵌套对象 --> Author: @Model.Author.FirstName @Model.Author.LastName 表单绑定: 在表单,可以使用 HtmlHelper

31910
领券