我有一个HTML表单(screenshot of the HTML form)
点击“提交”时，我将使用
获取输入元素值
var input = $(this).serializeArray();
很明显它将以数组形式返回。
如果我想以JSON对象的形式返回表单的每一行，那么这些对象的数组将是最好的方法吗？
{
"row": {
"dimension": "Sales",
"levels": {
"level1": "NorthEast",
"level2": "East",
"level3": "MidWest"
}
}
}
任何线索/方向都很好吗？ （随附下面的代码段，JavaScript中的第56、57行）
function Row(dimension, levels) {
this.dimension = dimension;
this.levels = levels;
}
class Coordinate {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
$(document).ready(function(e) {
var maxrows = 6;
var rows = 1;
var i = 1;
var j = 1;
var maxlevels = 2;
$(".add_more").click(function(e) {
if (rows <= maxrows) {
var dimension_name = "dimension" + i;
var level_name1 = "level" + i + "_" + 1;
var level_name2 = "level" + i + "_" + 2;
var level_name3 = "level" + i + "_" + 3;
var html =
'<div class="form-group row"><div class="col-xs-2"><input type="text" class="form-control" value="sales" name="' +
dimension_name +
'"></div> <div class="col-xs-2"><input type="text" class="form-control" value="Northeast" name="' +
level_name1 +
'"></div> <div class="col-xs-2"><input type="text" class="form-control" value="NorthWest" name="' +
level_name2 +
'"></div> <div class="col-xs-2"> <input type="text" class="form-control" value="WestCoast" name="' +
level_name3 +
'"></div> <div id="del" class="col-xs-2"> <input type="button" value="X"><br></div> </div></div>';
$("#inputContainer").append(html);
rows++;
i++;
}
});
$("#inputContainer").on("click", "#del", function(e) {
$(this)
.parent("div")
.remove();
rows--;
$("#svgContainer").text("");
console.log("removed");
});
$("form").submit(function(e) {
event.preventDefault();
$("#svgContainer").text("");
var dim = [];
var lev = [];
//
var input = $(this).serializeArray();
console.log(input);
var inputLength = input.length;
for (var i = 0; i < inputLength; i++) {
var val = input[i].name.startsWith("dim");
if (val) {
dim.push(input[i].value);
} else {
lev.push(input[i].value);
}
}
drawSpider(dim, lev);
});
function drawCircle(originX, originY, r) {
var cx = originX;
var cy = originY;
var circle =
'<circle cx="' +
cx +
'" cy="' +
cy +
'" r="' +
r +
'" style="stroke:#000000; fill:white" />';
var existing = $("#svgContainer").html();
$("#svgContainer").html(existing + circle);
}
function drawSpider(dim, lev) {
var spiderContainer = $("#spiderContainer");
var width = spiderContainer.width();
var height = spiderContainer.height();
var originX = width / 2;
var originY = height / 2;
drawCircle(originX, originY, 60);
writeText(originX, originY);
var thetaIncrement = (2 * Math.PI * (180 / Math.PI)) / dim.length;
var theta = 0;
for (var i = 0; i < dim.length; i++) {
var radius = 60;
var cosTheta = Math.cos(theta * (Math.PI / 180));
var sinTheta = Math.sin(theta * (Math.PI / 180));
var x1 = originX + radius * cosTheta;
var y1 = originY + radius * sinTheta;
var limblength = 300;
var x2 = x1 + limblength * Math.cos(theta * (Math.PI / 180));
var y2 = y1 + limblength * Math.sin(theta * (Math.PI / 180));
drawLine(x1, y1, x2, y2);
var pointsBetween = getPointsBetween(x1, y1, x2, y2, 3);
for (var j = 0; j < 3; j++) {
var spotRadius = 10;
var x =
(pointsBetween[j].x -
spotRadius +
(pointsBetween[j].x + spotRadius)) /
2;
var y =
(pointsBetween[j].y +
spotRadius +
(pointsBetween[j].y - spotRadius)) /
2;
drawCircle(x, y, spotRadius);
writeText(x + 15, y - 10);
}
theta += thetaIncrement;
}
}
function writeText(x, y) {
// x = x + 15;
// y = y - 10;
var txt = '<text x="' + x + '" y="' + y + '" style="">Test</text>';
var existing = $("#svgContainer").html();
$("#svgContainer").html(existing + txt);
}
var spotCount;
function getPointsBetween(x1, y1, x2, y2, spotCount) {
var pointsBetween = [];
x2 = Math.ceil(x2);
if (x1 != x2) {
//Calculating slope
var m = (y2 - y1) / (x2 - x1);
var b = y1 - m * x1;
var deltaX = (x2 - x1) / spotCount;
for (var k = 1; k <= spotCount; k++) {
var point = new Coordinate();
point.x = x1 + deltaX * k;
point.y = m * point.x + b;
pointsBetween.push(point);
}
} else {
var deltaY = (y2 - y1) / spotCount;
for (var k = 1; k <= spotCount; k++) {
var point = new Coordinate();
point.x = x1;
point.y = y1 + deltaY * k;
pointsBetween.push(point);
}
}
return pointsBetween;
}
function drawLine(x1, y1, x2, y2) {
var line =
'<line x1="' +
x1 +
'" y1="' +
y1 +
'" x2="' +
x2 +
'" y2="' +
y2 +
'" style="stroke: black; stroke-width:2;"/>';
var existing = $("#svgContainer").html();
$("#svgContainer").html(existing + line);
}
});#spiderContainer{
border-style: solid;
width: 1000px;
height: 1000px;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>Spider</p>
<form>
<div id="inputContainer">
<div class="form-group row">
<!-- <div id="inputContainer"> -->
<div class="col-xs-2"> Dimension <input type="text" class="form-control" value ="testdimension" name="dimension0" id="dimension"> </div>
<div class="col-xs-2"> Level 1 <input type="text" class="form-control" value ="testlevel1" name="level0_1" id="level1"></div>
<div class="col-xs-2"> Level 2 <input type="text" class="form-control" value ="testlevel2" name="level0_2" id="level2"> </div>
<div class="col-xs-2"> Level 3 <input type="text" class="form-control" value ="testlevel3" name="level0_3" id="level2"></div>
<div class="col-xs-2"> Add <input type="button" class="form-control add_more btn btn-primary" value="+"></div><br><br><br>
<!-- </div> -->
</div>
</div>
<input class="btn btn-primary" type="submit" value="Submit">
</form>
<div class="row justify-content-md-center" id="spiderContainer">
<div class="col">
<svg id="svgContainer" viewBox="0 0 1000 1000">
</svg>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="formlogic.js"></script>
</html>