将表单数据插入空表单

Question

当 HTML 表单通过 POST 提交/发送到服务器时，表单数据使用语法 key1=value1&key2=value2&... 通过“表单字符串”发送，服务器可以处理此数据。

是否有使用 Javascript 和 HTML 执行以下操作的本机方式：给出空的 HTML 表单，并使用语法 key1=value1&key2=value2 的语法 key1=value1&key2=value2 发送表单字符串（通过 POST 发送相同的语法）。 现在用表单字符串中的数据“填充”空的 HTML 表单。

我认为在表单字符串中的值上实现这种循环并使用 DOM 操作插入它们并不难，但也许有更好的本地方式来做到这一点？ （比如，单线）

Answer 1

假设您有以下输入：

<input type="text" id="fname" />
<input type="text" id="lname" />

您可以为这些输入中的每一个设置value属性，以将数据从您的给定格式填充到它们的输入中：

const data = 'fname=john&lname=doe';
data.split('&').forEach((keyValuePair) => {
  document.getElementById(keyValuePair.split('=')[0]).value = keyValuePair.split('=')[0];
})

这是基本的并且是您的用例独有的，因此我建议您查看URLSearchParams文档以构建更强大的解决方案。

Answer 2

如果由于某种原因您最初无法在 HTML 中设置该字段的值：

<input type="text" name="key1" value="Initial value 1" /> 

而且，由于某种原因，您绝对必须通过 JavaScript 从初始 String 值进行操作，那么这里有一个简短的方法：

const string = 'key1=value1&key2=value2&key3=value3' // your initial string

//Split, interate, and set the field's value (if the field with name="key..." exists)
string.split('&').forEach(pair => {
  let [key, val] = pair.split('=')
  let field = document.querySelector(`[name=${key}]`)
  if (field) {
    field.value = val
  }
})