动态追加数据以形成帖子答案

【问题标题】：Dynamically append data to form post动态追加数据以形成帖子
【发布时间】：2012-01-16 13:50:31
【问题描述】：

使用 html 表单，使用“post”方法，有没有办法指示浏览器动态添加数据（一旦客户端发布表单）到帖子，而不是输入元素名称的形式价值对？你能用 javascript/jquery/ajax 说，当这个表单被发布时，附加一些字符吗？

【问题讨论】：

“字符”是什么意思，不是名称值对？是否要为现有名称值对添加后缀？还是您想添加另一个名称值对，而不是通过将另一个输入元素附加到 DOM 的方式？
我想知道如何在不附加另一个输入元素的情况下添加名称值对，感谢您的澄清

【解决方案1】：

<form id="form1" onsubmit="sbmForm1();return false;">
<input type="text" name="var1" value="value1" />
<input type="text" name="var2" value="value3" />
<input type="submit" name="sbm-btn" value="send" />
</form>

在 javascript 函数 sbmForm1 中，您可以添加参数并通过 ajax 发送：

    $.ajax({
        url: 'http://www.yoururl.com/script.php',
        type: 'POST',
        cache: false,
        data: $('#form1').serialize() + '&yournewvar=yournewvalue',
        success: function(msg) {
            location.reload();
        }
    });

你需要 jquery 来做这个请求！

【讨论】：

这是我一直在寻找的，但是否可以在将 url 作为属性放入表单元素 (action=url) 时做到这一点，而不是使用表单内联 onsubmit 处理程序？
@Sam：您可以输入url: $('#form1').attr('action')，并且您不必指定 URL 两次。在大多数方面，这就像一个常规的表单提交。但是，我认为在 DOM 中附加一个隐藏字段似乎更具侵入性......

【解决方案2】：

您可以使用 XMLHttpRequest Javascript 对象来执行此操作。去 mozilla 开发者文档查看这个对象的 api。

【讨论】：

【解决方案3】：

您还可以使用 serializeArray()，它允许您将数据添加到 JSON 结构：

var form = $('#form1');

form = form.serializeArray();

form = form.concat([
    {name: "customer_id", value: window.username},
    {name: "post_action", value: "Update Information"}
]);

$.post('/change-user-details', form, function(d) {
    if (d.error) {
        alert("There was a problem updating your user details")
    } 
});

【讨论】：