基于AJAX的网站中的JS window.location

Question

I have a simple AJAX based site that I have an equally simple geolocation function that redirects a user to a new page when they click a button. 我有一个简单的基于AJAX的网站，我有一个同样简单的地理位置功能，当用户单击按钮时，该功能会将用户重定向到新页面。

This is the part of my geolocation function that redirects users which, as you will see, redirects people to a page called weather.php; 这是我的地理定位功能的一部分，它重定向用户，如您所见，它会将人们重定向到名为weather.php的页面。

function showPosition(position) {
    window.location='weather.php?lat='+position.coords.latitude+'&long='+position.coords.longitude;
}

The problem is that it redirects the page using a "traditional" page load and thus renders the AJAX page loading I have implemented obsolete. 问题在于它使用“传统”页面加载来重定向页面，从而使我已经实现的AJAX页面加载过时。

Is it possible to modify this function and make it AJAX friendly? 是否可以修改此功能并使其对AJAX友好？

This is the full redirect code; 这是完整的重定向代码；

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

Answer 1

Here is how you can do it. 这是您的操作方法。 I give you a simple example of a website where the pages are loaded with Ajax. 我给您一个简单的网站示例，其中的页面已加载Ajax。 The page is put in the url. 该页面放在URL中。

Not like this: weather.php?lat=50.452 不是这样的：weather.php？lat = 50.452

But like this: index.php#50.452 但是像这样：index.php＃50.452

The point is: when you change anything right of the #, the page is not reloaded. 关键是：当您在＃号上进行任何更改时，不会重新加载该页面。 And still, there is a system where the url remembers the page 仍然有一个网址可以记住页面的系统

It's not a complete answer to your question, but I hope it gives you the inspiration you need 这不是您问题的完整答案，但我希望它能为您提供所需的灵感

pages.php 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 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>

Your job ... You should not redirect the client. 您的工作...您不应该重定向客户端。
It's (something like) a Google Maps thing, right? 这是（类似）Google Maps的东西，对吧？ What are your intentions there? 您打算在那里做什么？

Why can't you load weather.php with Ajax? 为什么不能用Ajax加载weather.php？ I bet you can. 我敢打赌你可以。

基于AJAX的网站中的JS window.location

问题描述

1 个解决方案

解决方案1
0 2015-03-24 14:31:49

基于AJAX的网站中的JS window.location

问题描述

1 个解决方案

解决方案1 0 2015-03-24 14:31:49

解决方案1
0 2015-03-24 14:31:49