jquery - 同步提交帖子（不是ajax）答案

【问题标题】：jquery - submit post synchronously (not ajax)jquery - 同步提交帖子（不是ajax）
【发布时间】：2011-04-20 06:19:50
【问题描述】：

我有一个页面 (page 1)，它接受发布请求、做一些事情并在最后显示一些数据。

从另一个页面（page 2），我想在单击按钮时重定向到page 1，当然通过POST发送page 1所需的所有相关数据。

当然，我可以使用旧的技巧，即在页面上有一个不可见的表单，在用户单击按钮后使用 jquery 填充我需要的所有数据，然后自动提交（）它。但这看起来很麻烦 - 使用类似于 $.post 的语法要好得多，而不是开始操作 html。 $.post 将是完美的，如果它实际上重定向到页面而不是异步发出请求（我不能在 ajaxy 帖子完成后重定向到 page 1，因为 page 1 需要数据来显示某些东西）。

有什么方法可以用 jquery 做我想做的事，还是丑陋的隐形形式是唯一的出路？

附言

我知道还有其他复杂的方法可以实现我想要的，例如使用$.post 并将响应的 html 植入我们当前所在的页面中，但我只想知道是否有 直截了当 使用 jquery 的方法

【问题讨论】：

标签： jquery post synchronous

【解决方案1】：

我将 Greg W 的代码改编为一个可以在代码中调用的直接函数：

function postIt(url, data){

    $('body').append($('<form/>', {
      id: 'jQueryPostItForm',
      method: 'POST',
      action: url
    }));

    for(var i in data){
      $('#jQueryPostItForm').append($('<input/>', {
        type: 'hidden',
        name: i,
        value: data[i]
      }));
    }

    $('#jQueryPostItForm').submit();
}

【讨论】：

你必须删除行 event.preventDefault();

【解决方案2】：

我想答案是没有直截了当的方法。有关添加此功能的一般功能，请参阅 Greg W 的回答。

【讨论】：

【解决方案3】：

这让我想到了一个小的 jQuery 函数来模仿你描述的 $.post 行为。它仍然在后台使用不可见的形式，但它的语法相对简洁明了。

$(document).ready(function(){
    $('#myButton').PostIt('post.php', {foo:'bar', abc:'def', life:42});
    $('#myOtherButton').PostIt('post.php', dataObjectFromSomewhereElse);
});

$.fn.PostIt = function(url, data){

  $(this).click(function(event){

        event.preventDefault();

        $('body').append($('<form/>', {
          id: 'jQueryPostItForm',
          method: 'POST',
          action: url
        }));

        for(var i in data){
          $('#jQueryPostItForm').append($('<input/>', {
            type: 'hidden',
            name: i,
            value: data[i]
          }));
        }

        $('#jQueryPostItForm').submit();
    });
}

【讨论】：

我意识到这只是一个示例，但根据规范，JSON 对象中的键应该是字符串，因此用引号括起来。当我第一次遇到 JSON 时，这种事情让我很头疼。 ;-)
有趣。我从来不需要在我的 JSON 键周围加上引号，除非键本身是保留字，如“类”或其他东西。我想在所有内容周围加上引号是保证你永远不会遇到这个问题的一种方法，但我更喜欢它看起来没有引号的方式。
关于该主题的更多信息：stackoverflow.com/questions/2348867/…
另请参阅此处 jQuery 文档中的“创建新元素”部分：api.jquery.com/jQuery
@Flo 这不是 JSON，它只是一个 JavaScript 对象。

【解决方案4】：

html:

<form id="myform" method="get" acction="page2">
   <!-- data -->
</form>

js:

$('#myform').bind('submit', function(ev) {

  ev.stopPropagation();

  var ok = true;
  //manipulate html and 'ok'

  return ok;   // if ok == false, don't execute post


});

【讨论】：

【解决方案5】：

如果您必须发出 POST 请求，那么隐形表单是您更好的选择之一。

如果您的应用程序将使用 GET 请求，我会将数据编码到查询字符串中并执行。

document.location.href =

您可以使用jQuery.serialize 来生成查询字符串。

【讨论】：