将对象添加到表单提交（发布）答案

【问题标题】：Add object(s) to form submission (post)将对象添加到表单提交（发布）
【发布时间】：2021-01-07 07:59:40
【问题描述】：

我有一个表单，我有两个对象要与该表单一起提交。

<form role="form" id="orderform" action="test.php" method="post">
    <input type="text" name="test">
    <button type="submit">Place Order</button>
</form>

<script>

    var items1 = {name: "test", value: "123"} //needs to submit with form

    var items2 = {name: "test2", value: "456"} //meeds to submit with form

    $("#orderform").submit(function(event) {

        event.preventDefault();

        //do something to add items1 and items2 to form.

    }

</script>

如何在提交表单时提交items1 和items2？

【问题讨论】：

以某种形式对它们进行序列化（例如通过将它们编码为 JSON），并将结果放入隐藏字段中。

标签： javascript post

【解决方案1】：

这个问题（Adding POST parameters before submit）已经有了答案，但我个人认为添加 dom 元素不应该是要走的路。

我的方法是在提交时获取表单数据并将您的对象添加到其中。之后发送请求。主要好处是您可以使用 ajax（这实际上改善了用户体验）并且不必修改/添加 dom 元素，如果添加超过 2 个对象，这会变得非常讨厌。

var items1 = {
  name: "test1",
  value: "123"
} //needs to submit with form

var items2 = {
  name: "test2",
  value: "456"
} //meeds to submit with form

$("#orderform").submit(function(event) {

  event.preventDefault();
  //add the items to the form data
  let data = $(this).serializeArray();
  data.push(items1);
  data.push(items2);
  let params = $.param(data);
  //send the data with ajax
  $.ajax({
    type: $(this).attr('method'),
    url: $(this).attr('action'),
    data: data,
    success: function(data) {
      window.location.href = "success.php"+params;
    },
    error: function() {
    }
});
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="orderform" action="test.php" method="post">
  <input type="text" name="test">
  <button type="submit">Place Order</button>
</form>

为了在单独的页面上显示结果，我将表单数据作为获取参数添加到成功重定向并像这样显示它们。

还请阅读 XSS 以及如何避免它（清理输入/参数）。 success.php 应该如下所示。

echo $_GET["test1"];
echo $_GET["test2"];

【讨论】：

确实这是一个更好的答案。
是的，但是如何加载新页面，例如带有数据的确认页面？
只需添加 window.location.href，然后添加所需的 url。 @jac
有了数据，意思是我需要确认页面显示“items1”，“items2”
由于我不知道您的服务器结构（假设您使用 php），我的方法如下。检查我编辑的 sn-p。 @jac

【解决方案2】：

您可以将它们添加为隐藏输入。

let items = [
  {
    name: 'bar',
    value: 'foo',
  },
  {
    name: 'qux',
    value: 'baz',
  },
];

let form = document.getElementById('orderform');

let itemsToBeSubmited = items;
itemsToBeSubmited.forEach((item) => {
  let input = document.createElement('input');
  input.setAttribute('type', 'hidden');
  input.setAttribute('name', item.name);
  input.setAttribute('value', item.value);
  form.appendChild(input);
});

<form role="form" id="orderform" action="test.php" method="post">
    <input type="text" name="test">
    <button type="submit">Place Order</button>
</form>

【讨论】：