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

Posted 2023-05-09

【中文标题】使用 javascript 函数调用模拟 post 表单提交

【英文标题】：Simulate post form submit with a function call with javascript

【发布时间】：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 也是一样的。

【参考方案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，您只是使其异步，这对您有帮助，因为您无需更改/重新加载页面来详细说明表单结果。