使用javascript通过函数调用模拟帖子表单提交

Question

使用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();
}

上面的方法有效,但我认为它不够好.当字段具有特殊字符或其他内容时,可能会导致错误.

Answer 1

您可以使用jQuery在功能上构造表单,而不是通过连接字符串,因此特殊字符不会成为问题.

body在提交之前,您需要将此表单附加到HTML ; 最新版本的Chrome 现在需要这个.

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();
}

Answer 2

由于在某些情况下接受的答案可能不再适用于基于 Chromium 的浏览器，这里有一个解决方法：

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()
}