【发布时间】：2012-12-07 00:55:57
【问题描述】：
所以，这个问题存在 $.mobile.changePage in jQuery Mobile - update visible URL? 但它没有解决我的问题。
我正在使用 PHP 和 MySQL 开发一个相当大的 JQM 站点，但我对 JQM 的理解遇到了一些限制。
那么发生了什么？好吧（查看我帖子中的最后一段代码），导航到 page1.html 然后从下拉列表中选择 page2.html 只会将 #p 更改为“page2.html”并且不会更新页面的页眉、内容或页脚“1”到“2”。
我已经完成了我认为关闭 ajax 的操作，但它仍然将 #page2.html 附加到 URL...
我已经阅读 JQM Docs 并在 Google 上搜索了 2 天。在这方面我完全没有运气，我感谢您的任何见解。
以下代码完美运行（我很抱歉在这里发布整个 HTML...我目前无法访问 pastebin），页面转换非常漂亮，但它不适合我的需要，因为我需要大约 40 个页面并将它们全部放在一个包含所有 MySQL 调用的文件中会很疯狂，特别是因为用户可能在一个会话中只使用其中的 10 个页面，从而使其他 30 个页面的加载毫无意义、时间和数据消耗。
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).bind("pageinit", function(e) {
$("#nav").on("change", function(e) {
$.mobile.changePage($(this).val());
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1>Header 1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content 1</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h1>Footer 1</h1>
<select id="nav" data-native-menu="false">
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</select>
</div><!-- /header -->
</div><!-- /page -->
<div id="page2" data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1>Header 2</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content 2</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h1>Footer 2</h1>
<select id="nav" data-native-menu="false">
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</select>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
正如我所说，我正在开发的内容将相当大，因此为了允许链接并在将来创建和编辑时保持清醒，我要求每个页面都位于其自己的 PHP 文件中。
我模拟了每个页面的预期结果示例：
page1.html
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;
});
$(document).bind("pageinit", function(e) {
$("#nav").on("change", function(e) {
$("#p").html($(this).val());
$.mobile.changePage($(this).val());
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1>Header 1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content 1</p>
<div id="p">placeholder</div>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h1>Footer 1</h1>
<select id="nav" data-native-menu="false">
<option value="">SELECT</option>
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</select>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
而 page2.html 与 page1.html 完全相同，只是它的页眉、内容和页脚都用“2”而不是“1”。
另一方面，此站点需要登录。在 index.php 成功登录（使用提交给自身的表单）后，PHP 使用 header() 重定向到内部页面（假设为 inner.php）。但在此重定向之后，用户显示来自 inner.php 的内容，URL 仍然显示 index.php。
所以无论我使用 AJAX 还是 PHP 来更改页面，URL 都不会更新...
【问题讨论】：
标签： php jquery mysql ajax jquery-mobile