Question

我正在使用jQuery 1.6.1和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点击页面上的链接时，它会显示“undefined”。 jQuery Mobile目前无法处理重定向吗？

任何可能的解决方法？

感谢您的帮助。

编辑[3/23/12 12:41 AM 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的组合中它似乎不起作用。

我想在发布此问题后，我会向其他人提供一些额外的背景信息。

Answer 1

找出我自己问题的答案。在上面，我提到使用＆lt; form＆gt;这导致了问题。标签。浏览完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>

Answer 2

问题更深入。看一看here或here。

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

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

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

编辑：

但即使 data-ajax =“false”也不是防弹解决方案。使用它将您的移动应用程序拆分为多个浏览器页面，从而为派对带来各种浏览器差异。例如，Firefox有bf cache而Chrome doesn't。这是一个不圣洁的混乱，我开始认为像Sencha Touch这样的东西更适合开发假装是移动应用程序的页面。

编辑2：

或者，人们可以避免定期提交表单并使用自己的AJAX代码，然后根据结果切换页面，但我无法抗拒地认为它是2012年，这样的事情应该自动化并且无需冒汗就能完美运行。

Answer 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>

jQuery Mobile 301重定向问题

3 个答案: