Question

如何在不重新加载网页的情况下更新网页和网址。我在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 时，我得到（当然）服务器错误，该文件不存在。我该如何解决这个问题？

Answer 1

在JavaScript中试用window.location.hash=your_hash_string

Answer 2

该文件不存在。当你的服务器上的某些PHP脚本正在使用这些文件位置时发生错误。

Answer 3

尝试这样的事情：

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

更新页面和网址而不重新加载

3 个答案: