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

JavaScript div同名输入序列化到json数组

是指将同名的div元素中的输入框的值序列化为一个JSON数组的操作。

在JavaScript中,可以通过以下步骤实现该功能:

  1. 获取所有同名的div元素,可以使用document.querySelectorAll()方法,并传入相同的CSS选择器作为参数。
  2. 遍历获取到的div元素列表,对于每个div元素,可以使用querySelectorAll()方法获取该div元素下的所有输入框元素。
  3. 创建一个空数组,用于存储序列化后的JSON数据。
  4. 遍历每个输入框元素,获取其值,并将其存储为一个对象,对象的属性名可以是输入框的name属性值,属性值为输入框的值。
  5. 将每个对象添加到数组中。
  6. 最后,使用JSON.stringify()方法将数组转换为JSON字符串。

以下是一个示例代码:

代码语言:txt
复制
// 获取所有同名的div元素
var divs = document.querySelectorAll('div[name="inputDiv"]');

// 创建一个空数组
var jsonArray = [];

// 遍历每个div元素
divs.forEach(function(div) {
  // 获取该div元素下的所有输入框元素
  var inputs = div.querySelectorAll('input');

  // 创建一个对象,用于存储输入框的值
  var obj = {};

  // 遍历每个输入框元素
  inputs.forEach(function(input) {
    // 将输入框的name属性值作为对象的属性名,值为输入框的值
    obj[input.name] = input.value;
  });

  // 将对象添加到数组中
  jsonArray.push(obj);
});

// 将数组转换为JSON字符串
var jsonString = JSON.stringify(jsonArray);
console.log(jsonString);

这样,你就可以将同名的div元素中的输入序列化为一个JSON数组了。

对于这个问题,腾讯云没有特定的产品与之相关,因此无法提供相关产品和链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

javascript:巧用eval函数组装表单输入项为json对象

在ajax方式做web开发时,经常会遇到会保存前,收集表单输入项,组成json对象,然后把对象直接post服务端的场景 常规做法是在js里写类似如下的代码: var myObj = {}; myObj.x...//然后ajax post或get提交 表单元素不多的时候,这样还好,但是如果一个表单有好几十项甚至更多输入项的时候,写这种代码就太费劲了。...好在javascript中有一个邪恶的eval函数,可以帮我们完成一些类似c#反射的工作,比如下面这样: eval('A={}'); if (A.b==undefined) { A.b = {...不需要赋值的属性: <script type="text/<em>javascript</em>...不该有的属性:" + AwbModel.NotMe);  这样,只要form元素的name属性正确设置,需要收集表单对象时,调用一下setFormModel函数,就能快速得到一个json

1.5K50
  • AJAX和JSON

    JSON数据文本 JSON(javascript object notation)全称是javascript对象表示法,它是一种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据,2001年由Douglas...也可以是复杂数据类型的值 JSON中对象的键名必须放在双引号里面,因为JSON不是javascript语句,所以没有末尾的分号 说明︰同一个对象中不应该出现两个同名属性 数组 数组也是一种复杂数据类型,...JSON格式,并且可以被 JSON.parse() 方法还原 JSON之所以流行,是因为可以把JSON数据结构解析为有用的javascript对象 JSON对象的stringify()和parse()这两个方法可以分别用于把...JavaScript对象序列化JSON字符串和把JSON字符串解析为原生JavaScriptJavaScript的eval()类似于JSON.parse()方法,可以将json字符串转换为json...对象,但是,eval()可以执行不符合JSON格式的代码,有可能会包含恶意代码,所以尽量少用 渲染数据,渲染的方式有很多种,比较简写的一般是使用字符串循环遍历来进行拼接后传入html,示例代码 <div

    2.6K20

    JSON 的简介与使用

    JSONjavascript object notation)全称是 javascript 对象表示法,是一种数据交换的文本格式,用于读取结构化数据,提出目的是取代繁琐笨重的 XML 格式。...二、JSON的语法规则 JSON的语法可以表示以下三种类型的值: 1、简单值 简单值使用与 JavaScript 相同的语法,可以在JSON中表示字符串、数值、布尔值和null。...JSON 中对象的键名必须放在双引号里面,因为 JSON 不是 javascript 语句, 所以没有末尾的分号。...(说明:同一个对象中不应该出现两个同名属性) 3、数组 数组也是一种复杂数据类型,表示一组有序的值的列表,可以通过数值索引来访问其中的值 (说明:数组或对象最后一个成员的后面,不能加逗号) 三、关于 JSON...对象 JSON 对象的 stringify() 和 parse() 这两个方法可以分别用于把 JavaScript 对象序列化JSON 字符串和把 JSON 字符串解析为原生 JavaScript

    66210

    Django调用百度地图api在地图上批量增加标记点

    在调用百度地图api进行web开发时遇到了一个需求,我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区。...创建一个测试用的工程来测试我们的需要,可以使用pycharm或者django自带的命令创建工程 django-admin startproject addressdemo 创建app 创建工程之后,cd工程目录...id="allmap"> 同时我们也设置了一个...': json.dumps(address_data)}) 由于需要在前段页面中的js代码区域中使用,我们需要将列表json序列化然后通过页面渲染 或者 前段请求后端返回response携带接送数据...}); })(); } } 运行测试服务器查看效果 python manage.py runserver 在浏览器地址栏输入

    1.5K20

    《你不知道的JavaScript》 (中) 阅读摘要

    本书属于基础类书籍,会有比较多的基础知识,所以这里仅记录平常不怎么容易注意的知识点,不会全记,供大家和自己翻阅; 上中下三本的读书笔记: 《你不知道的JavaScript》 (上) 读书笔记 《你不知道的...JavaScript》 (中) 读书笔记 《你不知道的JavaScript》 (下) 读书笔记 第一部分 类型和语法 第二章 值 43.toFixed(3) // 报错: Invalid or unexpected...第四章 强制类型转换 JSON.stringify在对象中遇到undefined、function、symbol时会自动将其忽略,在数组中则会返回null,比如: JSON.stringify([1,...: console.log(foo) // 打印出DOM元素 所以说 HTML 中尽量少用 id 属性.....如果遇到这种情况: 使用JS调试器中的断点,而不要依赖控制台输出; 把对象序列化一个字符串中,以强制执行一次快照,比如通过 JSON.stringify; 第三章 Promise 回调未调用 如果 Promise

    81410

    Javascript面向对象入门

    特殊类型【null、undefined】 当定义了变量,没有任何赋值的时候,该变量就是undefined类型 复合类型【数组、对象、函数】 ---- javaScript对象的类型 在JavaScript...如果你想要使用具体对象写prototype的属性,实际上并不是写,而是重新为该类定义了一个同名(和prototype同名)的属性。...in循环 在学习AJAX的时候,发现JavaScript中for in循环,这种循环对于遍历JSON是很好用的。...于是写下了这篇博文 for in循环本质上是forEach循环,它主要有两个作用 遍历数组 遍历JavaScript对象 遍历数组 当使用for in来遍历数组的时候,它的循环计数器是数组元素的索引值...遍历JavaScript对象 当使用for in来遍历对象的时候,它的循环计数器是对象的属性名 //对象json上,包含了两个对象a和b属性 var json = {a:{num:1},

    86360

    【原生Ajax】全面了解xhr的概念与使用。

    简单来讲,JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质是字符串。...现状:JSON是在2001年开始被推广和使用的数据格式,现今为止,JSON已经成为了主流的数据交换格式。    ...JSON的两种结构 JSON就是用字符串来表示JavaScript的对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构。...数组结构:数组结构在JSON中表示为[]括起来的内容,数据结构为[‘java’,‘javascript’,30,true],数组中数据的类型可以是数字,字符串,布尔值,null,数组,对象6种类型。    ...6.不能使用undefined或函数作为JSON的值 JSON的作用:在计算机与网络之间存储和传输数据。 JSON的本质:用字符串来表示JavaScript对象数据或数组数据。

    2.4K20

    脚本语言知识总结.

    核心内容概述 1.JavaScript加强,涉及ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。...()+":"+date.getMinutes() +":"+date.getSeconds(); alert(dateStr); ④:Array常用属性方法 push() 加入元素数组...pop()  从数组移除最后一个元素 reverse()反转 join() 连接数组元素 通过特定内容 返回字符串 sort() 排序 slice() 截取数组中指定元素 从startend..."> function showOutter(){ // 获得输入内容 var content = document.getElementById("content").value; // 将输入的内容显示主窗体...ccc}] 表示三个对象数组 JSON应用场景: AJAX请求参数和响应数据 问题: 服务器端如何生成 json格式数据------->>依赖第三方开源类库 ③:JSON-lib的使用 是java

    5K130
    领券