JSP页面使用JS把数组封装成对象

Cyril.XF.Wang

已于 2023-05-04 11:15:08 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript jsp json

于 2020-05-09 15:59:23 首次发布

本文链接：https://blog.youkuaiyun.com/So_Hollow/article/details/106020643

日常开发记录专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript从HTML表格中收集数据并将其封装为JSON格式的方法，以便于提交到后台进行数据库保存。通过遍历表单元素，将序号、名称、类别和规格等字段的数据存储到数组中，再将这些数组转换为对象集合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们遇到这种情形,需要把页面中的表格每一行作为一组数据提交到后台保存到数据库，我们需要进行数据的收集。

序号	名称	类别	规格
1	机箱	华硕	GLP800
2	鼠标	雷蛇	DPI500
因为是在页面上，所以我们需要用JS来进行操作，接下来开始进行数据的获取和封装操作。

function submitChangeRemarkData() {
	var JsonStr = [];
	var xuhaoArr = [];
	var mingchengArr = [];
	var leibieArr = [];
	var guigeArr = [];
	//循环获取放入对应的数组中
	//序号
	$("input[name = 'xuhao']").each(function () {
		xuhaoArr.push($(this).val());
	})
	//名称
	$("input[name = 'mingchen']").each(function () {
		mingchenArr.push($(this).val());
	})
	//类别
	$("input[name = 'leibie']").each(function () {
		leibieArr.push($(this).val());
	})
	//规格
	$("input[name = 'guige']").each(function () {
		guigeArr.push($(this).val());
	})
	//将数组封装到对象中
	for(var i=0; i<xuhaoArr.length; i++){
		var oaEcrDetail = new OaEcrDetail(xuhaoArr[i],mingchengArr[i],leibieArr[i],guigeArr[i]);
		JsonStr.push(JSON.stringify(oaEcrDetail));
	}
	$("#changeRemarkData").val(JsonStr);
}

对象构造器如下：

function OaEcrDetail(xuhao,mingcheng,leibie,guige){
	this.xuhao = xuhao;
	this.mingcheng= mingcheng;
	this.leibie= leibie;
	this.guige= guige;
}