2014-03-18 191 views
0

如何在不重新加載網頁的情況下更新網頁和網址。我在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例如我得到(當然)服務器錯誤的文件不存在。我該如何解決這個問題?

+0

你不需要爲每一行回聲 – 2014-03-18 20:06:25

+0

這是正確的鏈接 – Idris

+0

聽起來像你需要一些AJAX調用 –

回答

1

嘗試window.location.hash=your_hash_string在JavaScript

+2

「無需重新加載」...必須通過AJAX。 – Sablefoste

+0

當然可以。但'location.hash'不會重新加載頁面。 – Ryan

0

嘗試是這樣的:

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

1

該文件不存在。當您的某個php腳本正在使用這些文件位置時,會發生錯誤。

+0

這是什麼意思。我需要複製index.php並將它們添加到不同的文件夾中? – Ajeo

+1

這不是很好的做法只是在互聯網上搜索選項我一般使用元標記而不是包括 –

相關問題