更改網頁內容而不更改URL

Question

我想做一個簡單的網站，用戶可以在其中輸入他們的名字。 但是我不知道該怎么做。

這就是我想要的。

在我的index.php ，將有一個input ，允許用戶輸入其名稱。在用戶單擊按鈕之后，我希望用戶保留在index.php但內容不同。 我可以做哪個文本框和按鈕的網站。 但是我不知道用戶單擊按鈕后該怎么辦。

不明白我的意思嗎？ 例如，這是Facebook登錄頁面。

登錄后，

我們仍然在同一頁面上（index.php），但內容已更改。 我知道如何制作網站，但是我不知道如何在不更改URL的情況下更改內容（例如www.example.com/index.php?u=blah，我只希望www.example.com/index.php）

誰能為我提供一個有關如何做到這一點的示例/想法？ 提前致謝。 對不起，我的英語不好。

編輯：對不起，我的英語不好。 其實我的意思是，相同的URL但內容不同。 我用谷歌搜索，我認為cookie是最好的解決方案。

Answer 1

您需要使用AJAX：

AJAX允許通過與后台服務器交換少量數據來異步更新網頁。 這意味着可以更新網頁的某些部分，而無需重新加載整個頁面。

我認為在這里提供有關AJAX的教程沒什么用，但是您可以閱讀w3school的AJAX教程 。 如果您了解基本知識，我建議您使用jQuery，這是一個比純JavaScript簡單的javascript庫。

Answer 2

您需要使用AJAX進行內容更新，而無需重新加載網頁。

JS代碼：

<script type="text/javascript">
$(document).ready(function() {
    var track_load = 0; //total loaded record group(s)
    var loading  = false; //to prevents multipal ajax loads
    var total_groups = <?php echo $total_groups; ?>; //total record group(s)

    $('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group

    $(window).scroll(function() { //detect page scroll

        if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
        {

            if(track_load <= total_groups && loading==false) //there's more data to load
            {
                loading = true; //prevent further ajax loading
                $('.animation_image').show(); //show loading image

                //load data from the server using a HTTP POST request
                $.post('autoload_process.php',{'group_no': track_load}, function(data){

                    $("#results").append(data); //append received data into the element

                    //hide loading image
                    $('.animation_image').hide(); //hide loading image once data is received

                    track_load++; //loaded group increment
                    loading = false; 

                }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                    alert(thrownError); //alert with HTTP error
                    $('.animation_image').hide(); //hide loading image
                    loading = false;

                });

            }
        }
    });
});
</script>

HTML代碼：

<ol id="results"></ol>
<div class="animation_image" style="display:none" align="center"><img src="ajax-loader.gif">    </div>

您可以在此處找到完整的教程。

Answer 3

您需要使用AJAX。 首先，創建一個用於收集表單數據的頁面，然后在索引頁面中使用AJAX加載另一個提交頁面。 您可以檢查https://github.com/jobayerccj/Simple-Admin-Panel-using-PDO-AJAX ，我已經使用AJAX創建了一個管理面板，其中使用AJAX加載了內部頁面，而沒有更改鏈接。

Answer 4

您也可以使用PHP來執行此操作，這是我在所有網站上所做的操作，這只是一個主意，不確定它是否正是您要查找的內容，但是如果您願意，這里是指向我當前網站的鏈接現場觀看。 單擊網站頂部的鏈接時，請務必檢查網址。 http://www.thedecoy.net

因此，在index.php頁面中，您將擁有該網站的基本html代碼，包括css和圖像或您要在所有網站上顯示的網站上使用的其他任何內容，然后在其中說內容div標簽這種類型的php代碼。

<?php 
error_reporting(E_ALL ^ E_NOTICE); 
function open_page($string){
    if (preg_match("/^[a-zA-Z]+$/", $string)){
        $string = $string;
    }else{ 
        $string = "";
    }
    return $string;
}
$page = open_page($_GET['page']);
if ($page){
    $file = "pages/".$page.".php";
if (file_exists($file)){
    $pagename = $page;
}else{
    $pagename = "404";
}
include("pages/".$pagename.".php");
}else{
    echo 'Anything you want displayed in the content of your main page would go here';
}
?>

您將在根目錄中的index.php文件所在的目錄中創建一個名為“ pages”的目錄，然后在其中創建其他頁面，例如about.php，contact.php等。我確信您已經明白了，在這些文件中您只需要放置要顯示的內容，這樣就不需要所有html正文或內容div本身中想要的任何內容。

假設您想將訪問您網站的用戶鏈接到您只需要像這樣的鏈接上調用的contact.php文件。

<a href="index.php?page=contact">Contact</a>

這將保持index.php加載，但將內容更改為contact.php信息。 代碼有點草率，並且是從我的網站本身提取的，因此您可能需要處理一些事情。

在頁面文件夾中放置一個404.php頁面，如果找不到頁面，將調用該頁面，因此，如果訪客輸入不存在的鏈接，則訪問者將看到此頁面。

不知道我是否遺漏了任何東西，但是請隨時詢問這是否對您有幫助。