使用 javascript 函数调用模拟 post 表单提交答案

【问题标题】：Simulate post form submit with a function call with javascript使用 javascript 函数调用模拟 post 表单提交
【发布时间】：2015-08-05 23:02:21
【问题描述】：

使用jQuery，我们可以模拟提交表单：

<form id="form1" method="post">
    <input name="key1" value="value1" />
    <input name="key2" value="value2" />
</form>

使用 AJAX 函数调用：

$.post('', { key1: 'value1', key2: 'value2' }, function() {
   // do call back
});

如果我们使用jquery.form.js

$('#form1').ajaxSubmit({
    success: function() {
        // do call back
    }
});

好的，现在我的问题来了：

我在标记中没有表单，我想使用“POST”方法提交包含一些动态内容的表单。

我想做一个函数调用来模拟这个过程，可能是这样的：

utils.post('/url', {key1: 'value1', key2: 'value2'});

调用之后，效果和我上面的表格一样，我提交了，自然同步的方式。

有什么好的方法吗？

如果问题不清楚，我可以做一个丑陋的例子来解释我想要什么：

util.post = function(url, fields) {
    var $form = $('<form action="'+url+'" method="post"></form>');
    var key, val;
    for(key in fields) {
        if(fields.hasOwnProperty(key)) {
            val = fields[key];
            $form.append('<input type="hidden" name="'+key+'" value="'+val+'" />');
        }
    }
    $form.submit();
}

上述方法有效，但我认为它不够好。当字段包含特殊字符或其他内容时，可能会导致错误。

【问题讨论】：

我不明白这个问题。只需使用该 URL 和数据调用 $.post()。
@Barmar 我只想以自然的方式提交表单，而不是使用 xhr。
“以自然的方式”是什么意思？
@TylerH 效果和我提交普通表单一样，点击提交按钮。
那是POST方法。 XMLHttpRequest 也是一样的。

标签： javascript jquery ajax forms

【解决方案1】：

您可以使用 jQuery 功能性地构造表单，而不是通过连接字符串，因此特殊字符不会成为问题。

在提交之前，您需要将此表单附加到 HTML body；最新版本的 Chrome now require this。

var util = {};
util.post = function(url, fields) {
    var $form = $('<form>', {
        action: url,
        method: 'post'
    });
    $.each(fields, function(key, val) {
         $('<input>').attr({
             type: "hidden",
             name: key,
             value: val
         }).appendTo($form);
    });
    $form.appendTo('body').submit();
}

【讨论】：

谢谢楼主。顺便说一句，您认为这样做是一个好习惯吗？我想将此功能添加到我的工具包功能中并广泛使用。
我看不出有什么理由不使用这样的东西。我强烈推荐这种创建 DOM 元素的方法，而不是构造 HTML 字符串。
代码有问题。在append函数中，应该有$('<input>', {...})
现在在谷歌浏览器中失败，Form submission canceled because the form is not connected
将表单附加到正文中。 $form.appendTo('body').submit()

【解决方案2】：

由于接受的答案可能不再适用于例如Chromium based browsers 在某些情况下，这里有一个解决方法：

util.post = function(url, fields) {
  var $form = $('<form>', {
    action: url,
    method: 'post'
  }).append(
    $.map(fields, function(key, val) {
      return $('<input>').attr({
         type: "hidden",
         name: key,
         value: val
      }).appendTo($form);
    })
  )
  var w = window.open("about:blank")
  w.document.write($form[0].outerHTML)
  w.document.forms[0].submit()
}

【讨论】：

【解决方案3】：

您唯一的问题是，由于您没有可以从中获取数据的表单字段，因此无法使用 .serialize 来构建数组。您只需要手动构建数组。

Key1...Keyn 可以是您指定的名称，而不是表单字段名称属性（这实际上是序列化所做的），并且值可以是您想要的任何值：

来自 div 的 html；
您计算的值；
javascript 变量；
来自 db 的值；

关键是在任何情况下您都不是在模拟发布表单。使用 ajax，您只是使其异步，这对您有帮助，因为您无需更改/重新加载页面来详细说明表单结果。

【讨论】：