基于 AJAX 的站点中的 JS window.location
Posted
技术标签:
【中文标题】基于 AJAX 的站点中的 JS window.location【英文标题】：JS window.location in an AJAX based site 【发布时间】：2015-03-24 08:24:55 【问题描述】：我有一个简单的基于 AJAX 的网站，我有一个同样简单的地理定位功能，可以在用户单击按钮时将他们重定向到新页面。
这是我的地理定位功能的一部分，用于重定向用户，正如您将看到的，它将人们重定向到名为 weather.php 的页面；
function showPosition(position)
window.location='weather.php?lat='+position.coords.latitude+'&long='+position.coords.longitude;
问题在于它使用“传统”页面加载重定向页面，从而使我实现的 AJAX 页面加载过时。
是否可以修改此功能并使其对 AJAX 友好？
这是完整的重定向代码；
<button onclick="getLocation()">My Location</button>
<script>
var x = document.getElementById("message");
function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition, showError);
else
x.innerhtml = "Geolocation is not supported by this browser.";
function showPosition(position)
window.location='weather.php?lat='+position.coords.latitude+'&long='+position.coords.longitude;
<script>
【问题讨论】：
【参考方案1】：您可以这样做。 我给你一个简单的例子，一个网页是用 Ajax 加载的。页面放在url中。
不是这样的：weather.php?lat=50.452
但是像这样：index.php#50.452
关键是：当您更改 # 右侧的任何内容时，页面不会重新加载。 而且，还有一个系统可以让 url 记住页面
这不是你问题的完整答案，但我希望它能给你你需要的灵感
pages.php
<?php
switch(isset($_GET['p']) ? $_GET['p'] : '')
default:
$content = 'This is the HOME page ...';
break;
case 'calendar':
$content = 'calendar stuff ...';
break;
case 'contact':
$content = 'contact stuff ...';
break;
echo $content;
?>
index.php
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// load page according to the url.
// We read the url, to the right hand side of the # (hash symbol)
var hash = window.location.hash;
var page = hash.substr(1); // this removes the first character (the #)
loadPage(page);
// triggered by the navigation.
function loadPage(page)
getAjaxPage(page);
// this returns the content of a page
function getAjaxPage(page)
switch (page)
default: // = HOME page
var url = '';
case 'calendar':
case 'contact':
var url = page;
$.ajax(
url: 'pages.php',
data:
p: url
,
success: function(data)
$('#content').html(data);
)
</script>
<style>
#content
margin: 15px;
</style>
</head>
<body>
<div id="nav">
<a href="#" onclick="loadPage('')">Home</a> |
<a href="#calendar" onclick="loadPage('calendar')">Calendar</a> |
<a href="#contact" onclick="loadPage('contact')">Contact</a> |
</div>
<div id="content"></div>
</body>
</html>
你的工作......你不应该重定向客户端。 它（类似于）谷歌地图，对吧？ 你的意图是什么？
为什么不能用 Ajax 加载 weather.php？我打赌你可以。
【讨论】：
以上是关于基于 AJAX 的站点中的 JS window.location的主要内容，如果未能解决你的问题，请参考以下文章
仅使用 websockets 构建整个站点（通过 socket.io 和 node.js，没有 Ajax）？
wordpress 中的 Ajax 调用不适用于前端站点的订阅者用户
.htaccess使用URL中的#item重写站点以进行直接文件访问