jQuery Mobile 301 重定向问题答案

【问题标题】：jQuery Mobile 301 Redirect IssuesjQuery Mobile 301 重定向问题
【发布时间】：2012-04-07 10:10:50
【问题描述】：

我将 jQuery 1.6.4 与 jQuery Mobile 1.0.1 一起使用。每当您链接到然后尝试执行 301 重定向的页面时，我都会遇到问题。

我已经设置了一个示例页面：http://www.widgetsandburritos.com/jquery-mobile-test/

此页面上唯一的内容是 jQuery Mobile 包含和指向另一个页面的链接，该页面在其他地方有 301 重定向。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head>
    <body>
        <a href="301test.php">301 test</a>    
    </body>
</html>

301test.php 有以下内容：

<?php
header( "HTTP/1.1 301 Moved Permanently" ); 
header( "Location: 301success.html" ); 
?>

这应该只是简单地将浏览器传递给 301success.html。如果你直接去那个 URL 就可以了

http://www.widgetsandburritos.com/jquery-mobile-test/301test.php

但是，当您使用 jQuery Mobile 从页面单击链接时，它会显示“未定义”。 jQuery Mobile 目前是否无法处理重定向？

任何可能的解决方法？

感谢您的帮助。

编辑 [2012 年 3 月 23 日上午 12:41 CST]

I also posted this problem on the jQuery Mobile forums。那里有人建议将 rel="external" 添加到锚标记。如果您所做的只是建立链接，这在技术上是可行的，但如果您通过其他机制（例如 POST 请求）进行重定向，则无法解决问题。

为了说明，我在http://www.widgetsandburritos.com/jquery-mobile-test/test2.html 设置了一个辅助测试

<!DOCTYPE html>
<html>
        <head>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
                <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
                <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        </head>
        <body>

                <form method="post" action="301test.php">
                        <input type="submit" value="test" />
                </form>

        </body>
</html>

不是从链接到达 301test.php 重定向页面，而是现在我们提交的表单的位置。这将被使用的上下文是这样的，如果您提交一个有错误的表单，它将保持在同一页面上，以便您更正错误。如果没有错误，它会将您重定向到成功页面。这样做是为了避免在用户刷新浏览器时再次提交表单。它在普通的 Web 应用程序中运行良好。但在与 jQuery Mobile 组合时，它似乎不起作用。

只是想我会为关注此问题的其他人提供一些额外的背景信息。

【问题讨论】：

标签： redirect jquery-mobile http-status-code-301

【解决方案1】：

想出了我自己问题的答案。在上面，我提到这会导致使用

标记出现问题。浏览 jQuery Mobile 文档后，我发现了这个页面：http://jquerymobile.com/test/docs/forms/forms-sample.html

这里的诀窍是，如果您正在制作一个表单，请强制它不使用 AJAX。你可以通过添加

data-ajax="false" 到 FORM 标记。

所以这会改变

<form method="post" action="301test.php">

到

<form method="post" action="301test.php" data-ajax="false">

只是重申上面所说的。如果您需要使用锚链接做某事，只需添加 rel="external" 即可。

所以这会改变

<a href="301test.php">301 test</a>

到

<a href="301test.php" rel="external">301 test</a>

【讨论】：

我自己刚刚被这个并改变我的表单标签以包含 data-ajax='false' 就可以了。
完美，正是我需要的！

【解决方案2】：

问题更深层次。看看here 或here。

似乎 XMLHttpRequest 对象（用于执行 AJAX 请求的对象）自己处理重定向并返回最终响应。这意味着 jQuery Mobile 无法知道它应该更新 URL。

解决方案是在最后一页使用data-url 属性。它强制 jQuery Mobile 更新浏览器中的 URL。一种解决方法，但远非 hack。

顺便说一句，jQuery Mobile、AJAX 和重定向存在更多问题 - 例如，如果您在 AJAX 重定向后单击浏览器的后退按钮，jQuery Mobile（直到 1.1）可能会在重定向页面。因此使用 data-ajax="false" 是一个明智的选择。

编辑：

但即使是 data-ajax="false" 也不是万无一失的解决方案。使用它将您的移动应用程序拆分为多个浏览器页面，从而为聚会带来各种浏览器差异。例如，Firefox 有所谓的bf cache 而Chrome doesn't。这是一团糟，我开始认为像 Sencha Touch 这样的东西更适合开发伪装成移动应用的页面。

编辑 2：

或者，可以避免常规的表单提交并为此使用自己的 AJAX 代码，然后根据结果切换页面，但我无法抗拒认为现在是 2012 年，这样的事情应该自动化并且可以完美地工作而不会出汗。

【讨论】：

【解决方案3】：

我目前正在构建一个应用程序，但即使我已登录，我仍停留在登录页面上，并且不会被重定向。我使用了 data-ajax="false"

这是表单的代码：

   <section id="login">
            <h2>Want to take a ride? <span>Login</span></h2>
            <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
                    <?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
                <input id="username" type="text" name="username" placeholder="username" />
                <input id="password" type="password" name="password" placeholder="password" />

                <p>Not yet signed up? <a href="register.php" >Register</a></p>

                <input type="submit" name="btnLogin" data-theme="b" value="Sign in">
            </form>
        </section>

【讨论】：

这是一个问题吗？如果是，您需要开始一个新问题（并且可能想要发布更多信息）。