更改网页内容而不更改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页面，如果找不到页面，将调用该页面，因此，如果访客输入不存在的链接，则访问者将看到此页面。

不知道我是否遗漏了任何东西，但是请随时询问这是否对您有帮助。