无需重新加载即可更新页面和url

Update page and url without reloading

本文关键字：可更新 url 加载 新加载      更新时间：2023-09-26

如何在不重新加载网页的情况下更新网页和url我在SoundCloud上看到了这个，我想在我自己的项目中使用它。

这是我想要的一个想法:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery.min.js"></script>
</head>
<?php
$url = $_SERVER['REQUEST_URI'];
if (url == /login){
    include 'php/login.php'; 
    echo"<script>
        $(document).ready(function() {'
        history.pushState(null, null, '/login')
        });
        </script>"
}
if (url == /home){
    include 'php/home.php'
    echo"<script>
        $(document).ready(function() {'
        history.pushState(null, null, '/home')
        });
        </script>"
}
?>
</html>

的问题是，当我输入www.mydomain.com/home例如，我得到(当然)一个服务器错误，文件不存在。我怎样才能解决这个问题?

Try window.location.hash=your_hash_string in JavaScript

该文件不存在。

当某些php脚本在我们的服务器上使用这些文件位置时，会发生错误。

试试这样:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery.min.js"></script>
</head>
<body>
  <div id="navigation">
    <ul>
      <li><a href="#" onclick="_load_content('php/login.php');">Login</a></li>
      <li><a href="#" onclick="_load_content('php/home.php');">Home</a></li>
    </ul>
  </div>
  <div id="content"></div>
</body>
<script type="text/javascript">
function _load_content(url) {
     $("#content").slideUp("slow", function() { 
        $("#content").html('<p align="center">Loading...</p>');
     }
    $.ajax({ type: "get", url: url,
        success: function(response) {
            $("#content").html(response);
            $("#content").slideDown("slow");
        },
        error: function() {
            alert("An error occured");
        }
    });
}
$(document).ready(function() {
    _load_content("php/home.php");
});
</script>
</html>

注意:这是我做的非常基本的函数…你真的应该学习jQuery AJAX

相关文章：