Javascript 将对象添加到表单提交（post）

我有一个表单，我有两个对象，我想随表单一起提交

<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>

下单
var items1={name:“test”，value:“123”}//需要与表单一起提交
var items2={name:“test2”，value:“456”}//需要与表单一起提交
$（“#订单”）.submit（函数（事件）{
event.preventDefault（）；
//执行一些操作以将项目1和项目2添加到表单中。
}

---

如何使用表单提交

items1

和

items2

。

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

let项目=[
{
名称：'酒吧'，
值：“foo”，
},
{
名称：“qux”，
值：“baz”，
},
];
让form=document.getElementById（'orderform'）；
让itemsToBeSubmited=项；
itemsToBeSubmited.forEach（（item）=>{
让输入=document.createElement（'input'）；
setAttribute（'type'，'hidden'）；
input.setAttribute（'name'，item.name）；
input.setAttribute（'value'，item.value）；
表单。追加子项（输入）；
})；

下单

这个问题已经有了答案（），但我个人认为添加dom元素不应该是一条路

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

var items1={
名称：“test1”，
值：“123”
}//需要与表单一起提交
变量项2={
名称：“test2”，
值：“456”
}//与表格一起提交的会议
$（“#订单”）.submit（函数（事件）{
event.preventDefault（）；
//将项目添加到表单数据中
让数据=$（this.serializeArray（）；
数据推送（项目1）；
数据推送（项目2）；
设params=$.param（数据）；
//使用ajax发送数据
$.ajax({
类型：$（this.attr（'method'），
url:$（this.attr（'action'），
数据：数据，
成功：功能（数据）{
window.location.href=“success.php”+参数；
},
错误：函数（）{
}
});
})；

下单

以某种形式对它们进行序列化（例如，将它们编码为JSON），并将结果放入隐藏字段中。这确实是一个更好的答案。是的，但如何加载新页面，如带有数据的确认页面？只需添加window.location.href，然后添加所需的url即可。添加数据，这意味着我需要确认页面显示“items1”，“items2”由于我不知道您的服务器结构（假设您使用php），我的方法如下。请检查我编辑的代码片段。@jac