使用 URL 跳转到 AJAX 中的页面

Question

我的网站结构如下：

public_html/
    - index.php
    - students.php

用户加载包含一个按钮的站点 (index.php)。单击此按钮时，AJAX 用于加载“students.php”并将其显示给用户（好像他们只是无缝地转到了不同的页面）。这样做时会运行以下 JavaScript：

var state = {'Page' : 'Students'};
history.pushState(state, null, "students");

这会在浏览器历史记录中添加一个状态，并导致浏览器 URL 显示“example.com/students”而不是“example.com”。但是，如果用户此时要刷新，由于文件夹“students”实际上并不存在，因此不会加载任何内容（404 Not Found）。

我的问题是，如何让用户浏览器实际显示“index.php”并自动将它们带到学生页面。换句话说，用户刷新“example.com/students”，实际发生的是用户被带到 index.php 文件，AJAX 自动将他们带到学生页面（好像他们真的刷新了页面）

注意：我知道我可以将 null 传递给“pushState()”中的 url 参数，但是这种 URL 行为是需要的，因为它允许用户快速跳转到一个页面（如果我可以让它工作的话）

通过AJAX显示学生页面的完整代码如下：

/**
 * Display students screen.
 */
 function displayStudents(createState) {
     if(typeof(createState)==='undefined') {
         createState = true;
     }

     $("#container").css("width", $( window ).width());
     $("#container").css("position", "fixed");
     $("#container").animate({marginLeft: "-100%"}, ANIMATION_SPEED);

     xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             $("#container").css("margin-left", "100%");
             $("#container").html(xmlhttp.responseText);
             $("#container").animate({marginLeft: "0"}, ANIMATION_SPEED, null, function reset() {
             $("#container").css("width", "100%");
             $("#container").css("position", "relative");
         });

         if(createState) {
             var state = {'Page' : 'Students'};
             history.pushState(state, null, "students");
         }
      }
    };

    xmlhttp.open("GET", "students.php", true);
    setTimeout(function() { xmlhttp.send(); }, ANIMATION_SPEED);
}

这里的大部分代码都是用于动画的。

Answer 1

换句话说，用户刷新“example.com/students”，实际发生的情况是用户被带到 index.php 文件，AJAX 自动将他们带到学生页面（好像他们真的刷新了页面)

pushState 的意义在于，当您使用 JavaScript 转换页面状态时，您提供了一个 URL，服务器可以使用该 URL 来传递一些 HTML，该 HTML 将提供该状态下的页面。

如果您总是要提供主页，然后使用 JavaScript 对其进行转换，那么只需使用 hashbangs。 pushState 是完全错误的工具。

如果您要使用 pushState，则可能的方法的伪代码实现如下：

GET data needed for the page
IF `Accept` header prefers `application/json`
     Output `Content-Type: application/json` header
     Output data in JSON format
ELSE
     Output `Content-Type: text/html` header
     Pass data through the template for the page
     Output template as HTML

您将在 URL 中使用 students.php 而不是 students（或者您可以将 students 解析为您想要运行的 PHP 代码）。

由于您使用的是原始 XMLHttpRequest，因此您需要使用 setRequestHeader 来设置 Accept 标头。不过，您使用的是 jQuery，所以您可以使用 $.ajax 并将其传递给 dataType: "json"。