在前端开发中，有时候需要将一些值通过表单提交到后端进行处理。但是，有些值可能不希望用户看到，例如一些敏感信息，如 API 密钥等。这时，可以通过在表单中添加一个隐藏字段来存储这些值。本文将介绍如何在输入隐藏字段中存储返回 JSON 值。
什么是隐藏字段？
隐藏字段是 HTML 表单元素中的一种类型，它允许将一个值传递给服务器，但却不会显示在页面上。隐藏字段通常使用在表单中，用于存储一些不想展示给用户的数据。
<form action="/submit" method="post"> <input type="hidden" name="api_key" value="1234567890" /> <input type="text" name="name" /> <button type="submit">Submit</button> </form>
在上面的例子中，我们定义了一个名为 api_key 的隐藏字段，在提交表单时，它的值将发送给服务器，但是不会在页面上显示出来。
将 JSON 值存储在隐藏字段中
有时候需要将复杂的数据结构传递给服务器，此时可以将数据以 JSON 格式编码，并存储在隐藏字段中。接下来，我们将演示如何实现这样的功能。
编码 JSON 值
首先，我们需要将要传递的数据以 JSON 格式编码。假设我们有一个包含用户名和密码的对象：
const data = {
username: 'user@example.com',
password: 'secret'
};我们可以使用 JSON.stringify() 方法将其编码为 JSON 字符串：
const json = JSON.stringify(data);
console.log(json); // {"username":"user@example.com","password":"secret"}存储 JSON 值
接下来，我们需要将编码后的 JSON 字符串存储在隐藏字段中。这可以通过设置隐藏字段的值来实现：
<form action="/submit" method="post">
<input type="hidden" name="data" value='{"username":"user@example.com","password":"secret"}' />
<button type="submit">Submit</button>
</form>在上面的例子中，我们定义了一个名为 data 的隐藏字段，并将编码后的 JSON 字符串作为其值。在提交表单时，这个值将发送给服务器。
解码 JSON 值
最后，在服务器端，我们需要解码收到的 JSON 值。这可以通过解析 POST 请求中的数据来实现。如果你使用 Node.js，可以使用 body-parser 模块来解析 POST 请求的数据。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- --- - ---------- --------------------------- ------------------- ----- ---- -- - ----- ---- - -------------- ----- ---- - ----------------- --------------------------- -- ---------------- --------------------------- -- ------ --------------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在上面的例子中，我们使用 body-parser 模块来解析 POST 请求的 JSON 数据。然后，我们将收到的 JSON 字符串解码为一个对象，并输出其属性值。
结论
通过在输入隐藏字段中存储 JSON 值，我们可以轻松地将复杂数据结构传递给服务器，同时确保不会泄漏敏感信息给用户。此外，由于 JSON 是一种通用格式，这种方法也非常灵活，可以应用于各种场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24327