如何将表单中的数据保存到 JSON 字典中？答案

【问题标题】：How to save data from a form into a JSON dictionary?如何将表单中的数据保存到 JSON 字典中？
【发布时间】：2016-02-18 15:28:53
【问题描述】：

我遇到的问题是尝试将用户输入从表单保存到 JSON 字典中。我的表单的 HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script src="store.js" type="text/javascript"></script>
</head>
<body>
<form action="cgi-bin/formmail.pl" method="post">
    Name: <input id="name" type="text" name="name" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Date: <input id="date" type="date" name="date" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Location: <input id="location" type="text" name="location" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Category: <select id="category"><option value="landscape">Landscape</option>
    <option value="portrait">Portrait</option>
    <option value="conceptual">Conceptual</option>
    <option value="street">Street</option>
    <option value="fine art">Fine Art</option>
    <option value="people">People</option>
    <option value="abstract">Abstract</option>
    <option value="nature">Nature</option>
    <option value="architecture">Architecture</option>
    <option value="flower">Flower</option>
    <option value="general">General</option>
    <option value="animal">Animal</option>
    <option value="children">Children</option>
    </select>
    <br/>
    <br/>
    <input type="button" value="Change details" onclick="insert();" />
</form>
    <div id="display">      </div>
</body>
</html>

我之前使用过这样的 JS 函数：

function insert() {
var nameinput = document.getElementById("name").value;
var dateinput = document.getElementById("date").value;
var locationinput = document.getElementById("location").value;
  var category = document.getElementById("category").value;

var messageBox = document.getElementById("display");
   var details = [nameinput, dateinput, locationinput,category];
  messageBox.innerHTML="Name: " + details[0]+"<br/>"+"Date: " + details[1]+"<br/>"+ "Location: " + details[2]+"<br/>" + "Category: " + details[3];
}

有没有人知道我如何做到这一点的任何提示？感谢您的帮助！

【问题讨论】：

stackoverflow.com/questions/1184624/…
您面临的具体问题是什么？您的 JS 函数似乎没有使用任何 JSON。
我不确定如何使用 JSON 来保存用户输入数据。我希望它做一些与 JS 函数非常相似的事情，但我不确定我是否可以在 JSON 中做到这一点。这是一个画廊应用程序，所以我需要将用户输入存储在 JSON 字典中。
您不使用 JSON 来保存数据。 JSON 是一种数据格式。你可以用任何你喜欢的方式来格式化你的数据，包括 JSON。你想在哪里保存你的数据？我认为@garryp 的回复没有帮助，因为您不熟悉 JSON。
根据我的上级的说法，数据需要在 JSON 字典中。我不确定他为什么不能只使用我已经保存到的 JS 数组，但他坚持认为它在字典中。

标签： html arrays json dictionary

【解决方案1】：

您可以使用 serializeArray()
例子： https://jsbin.com/fokuqaw/edit?html,output

再见^.^

【讨论】：