pjax 提交表单 URL 重定向答案

【问题标题】：pjax submit form URL redirectionpjax 提交表单 URL 重定向
【发布时间】：2013-02-09 01:47:06
【问题描述】：

PJAX 的文档指出 Github 在submitting a Gist form 中使用了$.pjax.submit()。 Github 很好地实现了 ajax 表单提交的一个期望特性是 URL 从表单的 action 重定向到新创建的 URL（在这种情况下，包含新创建的服务器端 gist ID）。

例如，从这个：

https://gist.github.com/gists //  form action

到这里：

https://gist.github.com/tim-peterson/5019589 //assume this ID is generated server side

我已经让这个在我的网站上以类似方式工作（即，页面本身重定向到 https://gist.github.com/tim-peterson/5019589 的等价物），但我无法重定向 URL（它仍然像 https://gist.github.com/gists）。

这完全是服务器端问题（设置标头？）还是我在 pjax 中遗漏了什么？我使用的是我今天下载的 pjax 版本，所以不可能是我使用的是错误版本的 pjax。

【问题讨论】：

标签： php javascript codeigniter pushstate pjax

【解决方案1】：

使用 $.pjax.submit() 可能有一种更优雅/更合适的方法来执行此操作，但这是我一直在使用的解决方案，没有任何问题。我在提交之前序列化表单输入，然后将它们发布到我的服务器。然后检查来自服务器的回复，确保在调用我的 PJAX 继续之前我不需要阻止用户继续前进。

$("#save").click(function(e) {

  e.preventDefault();
  dataString = $("#form").serialize();

  $.ajax({
    type: "POST",
    url: $("#form").attr("action"),
    data: dataString,
    dataType: "json",
    success: function(data)
    {
      // Handle the server response (display errors if necessary)

      $.pjax({
        timeout: 2000,
        url: data.url,
        container: '#main-content'
      });

    }
  });
});

【讨论】：

谢谢，这正是我正在做的黑客解决方案。问题是这是否可以通过 2 个 AJAX 请求或仅 1 个来完成。显然只有一个请求会更好，其中 data.url 被推送到浏览器栏，就像内容被推送到 #main-content .现在我正在查看它，Github Gist 似乎与我们在发出 2 个请求时做同样的事情，尽管他们正在执行 PJAX(POST)->PJAX(GET) 而我们正在执行 AJAX(POST)->PJAX(得到）。最重要的是，只执行 1 个请求似乎更高效（在下一条评论中继续...）。
我只是不确定 PJAX 是否可以在 1 个请求中执行此操作，或者它是否需要我不知道的服务器端 hack（我正在使用 PHP/Codeigniter 并正在做带有 AJAX 请求的 301/302 重定向不会更改 URL，也许它在任何语言/框架中都不可能？）。

【解决方案2】：

你找到解决办法了吗？我有类似的问题。

基本上你需要在响应头中设置 X-PJAX-URL 属性。它的值应该与请求 URL 相同。

在 Laravel 中，我是这样做的……

App::after(function($request, $response)
{
  $response->headers->set('X-PJAX-URL', $request->getRequestUri());
});

【讨论】：

【解决方案3】：

如果响应 HTML 不包含初始 PJAX 容器，则会发生这种情况

【讨论】：