JSON - 将表单输入值作为 json 字符串传递出错答案

【问题标题】：JSON - passing form input value as json string went wrongJSON - 将表单输入值作为 json 字符串传递出错
【发布时间】：2019-05-15 15:53:52
【问题描述】：

我正在使用<input type="text"> 来存储通过 JavaScript 处理的表单值集合。

在 JavaScript 中，值具有这种结构

{"family":"Johnsons","Johnsons":{"girls":["Anna","Bella"],"boys":["Robert"]}}

所以上面的输入在表单提交之前看起来像这样

<input id="main" type="text" 
       value="{"family":"Johnsons","Johnsons":{"girls":["Anna","Bella"],"boys":["Robert"]}}">

表单保存后，我得到了这个

<input id="main" type="text" 
       value="{"family":"Johnsons","girls":"Anna","boys":"Robert"}">

输入的值是通过这段代码设置的，我怀疑这一定是问题所在：

// the input
var main = document.getElementById('main');
// the content structure before JSON.stringify
var content = {
  family: "Johnsons",
  Johnsons: {
    girls: [ "Ana", "Bela" ],
    boys: [ "Robert" ]
  }
};
main.value = JSON.stringify(content).replace( /\"/g, '\"');
main.setAttribute('value', main.value);

console.log(main.value);

&lt;input id="main" type="text"&gt;

我需要一个普通的 JavaScript 解决方案，但感谢您的回复。

【问题讨论】：

您能提供一个代码的工作示例吗？这意味着包括必要的 HTML 和 JavaScript，以便我们可以更准确地为您提供帮助。
使用setAttribute时不需要转义引号
提交前的 HTML 外观不是有效的 HTML。 " in 值必须被转义。
只是为了缩小范围，当您在提交时将您的值回显到屏幕上而不是在将其添加回输入后在后期处理中显示时会发生什么？
我推动输出回显的原因是我有一种强烈的感觉，这是服务器端而不是客户端。经过所有客户端的测试和建议，他们都正确地提交了值。这表明它一定是服务器端的问题。

标签： javascript json joomla3.0 custom-fields html-escape-characters

【解决方案1】：

不需要.replace()就行。另请注意，输入被分配了一个name 属性，其值为"content"，因此当提交表单时，输入的值将被发送到服务器。

var form = document.forms.form;
var main = form.elements.main;

var content = {
  family: "Johnsons",
  Johnsons: {
    girls: ["Ana", "Bela"],
    boys: ["Robert"]
  }
};

main.value = JSON.stringify(content);

console.log(main.value);

<form id='form' action='https://www.hashemian.com/tools/form-post-tester.php' method='post' target='response'>
  <input id="main" name='content' type="text"><input type='submit'>
</form>
<iframe name='response'></iframe>

【讨论】：

这不行，我来这里是因为我什么都试过了。
解释什么不会做，我怀疑你已经做了所有事情，或者你做了所有事情然后没有找到解决方案。我已将答案更新为提交到实时测试服务器的表单。响应显示在下面的 iframe 中。
感谢输入的人，现在我必须弄清楚如何解码那个东西。当我尽快完成测试时会通知你。
我刚刚尝试了以上所有方法，包括设置autocomplete="off" 和spellcheck="false"，我似乎必须调查Joomla 在表单提交上的作用，因为在您的表单测试器演示中看起来像轻而易举。
您可能想添加 joomla 标签或提出一个新问题，当然用 joomla 标签引用这个问题。

【解决方案2】：

你可以试试 已编辑

var main = document.getElementById('main');

var content = {
  family: "Johnsons",
  Johnsons: {
    girls: [ "Ana", "Bela" ],
    boys: [ "Robert" ]
  }
};
main.value = JSON.stringify(content, undefined, 2);

&lt;input id="main"&gt;&lt;/input&gt;

pre 告诉浏览器引擎里面的内容是预先格式化的，不需要任何修改就可以显示。所以浏览器不会删除空格，新行等。代码是为了使它更具语义，并表示里面的内容是一个代码sn-p。它与格式无关。建议这样使用，<pre><code> /* Your code snippet here. */ </code></pre>

<pre id="main"></pre>

【讨论】：

感谢您的输入，这是一种有趣的方法，但是，我需要 <input> 作为表单的一部分。表单提交后我也试过JSON.stringify(content, undefined, 2)，问题仍然存在。
为什么会有关闭</input>？