jQuery Mobile 301 重定向问题
Posted
技术标签:
【中文标题】jQuery Mobile 301 重定向问题【英文标题】：jQuery Mobile 301 Redirect Issues 【发布时间】：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 组合时，它似乎不起作用。
只是想我会为关注此问题的其他人提供一些额外的背景信息。
【问题讨论】：
【参考方案1】：想出了我自己问题的答案。在上面，我提到这会导致使用
【讨论】：
我自己刚刚被这个并改变我的表单标签以包含 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>
【讨论】：
这是一个问题吗？如果是，您需要开始一个新问题（并且可能想要发布更多信息）。以上是关于jQuery Mobile 301 重定向问题的主要内容，如果未能解决你的问题，请参考以下文章
[转]jquery mobile中redirect重定向问题
http 301 302 303 307 308 傻傻分不清