使用ajax制作单页应用，页面重载时报404错误答案

【问题标题】：Making a single page application with ajax and get a 404 error when the page is reloaded使用ajax制作单页应用，页面重载时报404错误
【发布时间】：2022-01-16 02:10:20
【问题描述】：

基本上，我正在编写一个个人网站并使用 ajax 制作了一个单页应用程序，因此当单击导航栏中的页面时，内容会添加到页眉和页脚之间的页面中。我必须手动编码推送状态和弹出状态，以使后退和前进箭头正常工作，他们这样做了。但是，剩下的唯一问题是，当我重新加载页面时，我得到一个 entry not found 错误。

我对 web 开发和 javascript 非常陌生，所以我的一些代码有点乱。我知道重新加载问题与服务器上实际不存在的添加页面 URL 有关。

以下是我的代码的相关部分：

HTML：

<nav>
   <ul class='nav-bar'>
      <li class='nav-item'><a id='writing'>Writing</a></li>
      <li class='nav-item'><a id='editing'>Editing</a></li>
      <li class='nav-item'><a id='about'>About</a></li>
      <li class='nav-item'><a id='contact'>Contact</a></li>
   </ul>
</nav>

Javascript

//change page on nav click
    $('.nav-bar li a').on('click', function(e) {
        e.preventDefault();
        var page = $(this).attr('id');
        var file = page + '.html';
        var origin = window.location.origin;
        //nav color change for current page
        removeActiveLinks();
        $(this).parent().addClass("active");

        $.ajax({
            type: 'GET',
            url: origin,
            dataType: 'html',
            success: function(response) {
                $('#content').load(file);
            },

            error: function(error) {
                console.log('There was an error', error);
            }
        });
        window.history.pushState(file, null, '/' + page);
    });

    //nav for home page
    $('#home').on('click', function(e) {
        e.preventDefault();
        removeActiveLinks();
        $('#content').load('home.html')

        window.history.pushState('index.html', null, '/');
    });

    //ensure page back functionality
    window.addEventListener('popstate', function(event) {
        var prevState = event.state;
        $('#content').load(prevState);
        removeActiveLinks();

        var page_id = '#' + prevState.split('.')[0];
        $(page_id).parent().addClass('active');
    });

Here's what the error looks like

【问题讨论】：

pushState 的第三个参数是 url... 而你确实推送了没有.html 扩展名的page（在$('.nav-bar li a').on('click' 中）。
您可能没有为这些页面中的每一个设置任何路线，并且显然没有后备方案。大多数（全部？）SPA 服务器将在任何页面请求时响应默认页面 (index.html)。
@LouysPatriceBessette - 我也想过，但 OP 正在尝试创建一个 SPA - 因此不想从浏览器调用单个 HTML 页面？
var origin = window.location.origin; 将在刷新时请求不完整的 url。
另外... jQuery .load() 方法是$.ajax() 的简写... 所以它是一个ajax 成功回调中的ajax 请求... mmm

标签： javascript html jquery ajax

【解决方案1】：

我会建议一些更简单的东西，使用简单的load()（ajax 的简写）和直接历史的state。

未经测试，但应该可以正常工作。

// Initial page load
$(document).ready(function(){
  $("#content").load("home.html");
})

// Change page on nav click
$(".nav-bar li a, #home").on("click", function (e) {
  e.preventDefault();
  
  var file = this.id + ".html";

  //nav color change for current page
  $(".active").removeClass("active");
  if(this.id != "home"){
    $("#"+this.id).parent().addClass("active");
  }

  $("#content").load(file);
  window.history.pushState(file, null, "/");
});

// Ensure page back functionality
window.addEventListener("popstate", function (event) {
  var prevState = event.state;
  $("#content").load(prevState);

  var page_id = "#" + prevState.split(".")[0];
  $(".active").removeClass("active");

  if(page_id != "#home"){
    $(page_id).parent().addClass("active");
  }
});

但是这个解决方案的地址栏中没有/writing。如果你坚持，你将不得不在服务器上进行更复杂的路由设置。

【讨论】：