php中如何在同一页面打开

在php的世界里，有时候我们需要在同一页面打开不同的内容，实现这个功能其实并不复杂，我就来给大家详细讲解一下如何在同一页面打开不同的内容,让你的网页变得更加灵活多变。

php中如何在同一页面打开

我们需要了解一个重要的概念——AJAX，AJAX（Asynchronous JavaScript and XML）是一种无需重新加载整个页面的情况下，可以与服务器交换数据和更新部分网页的技术，利用AJAX,我们可以在同一页面实现内容的动态加载。

php中如何在同一页面打开

我将分步骤为大家介绍实现方法：

准备工作

在开始之前，我们需要准备一些基本的HTML和PHP文件，我们创建一个名为index.php的文件，作为我们的主页面，在这个页面中，我们将创建几个按钮,用于触发加载不同内容的事件。

创建按钮和容器

在index.php文件中,我们可以这样编写代码：

<!DOCTYPE html>
<html>
<head>
    <title>同一页面打开不同内容</title>
</head>
<body>
    <button id="btn1">加载内容1</button>
    <button id="btn2">加载内容2</button>
    <div id="content"></div>
</body>
</html>

这里,我们创建了两个按钮和一个用于显示内容的容器。

编写AJAX请求

我们需要编写AJAX请求，以便在点击按钮时，向服务器发送请求并获取相应的内容，我们可以在标签中添加以下JavaScript代码：

<script>
    // 当文档加载完毕时，绑定点击事件
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('btn1').addEventListener('click', function() {
            loadContent('content1.php');
        });
        document.getElementById('btn2').addEventListener('click', function() {
            loadContent('content2.php');
        });
    });
    // 发送AJAX请求，加载内容
    function loadContent(url) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById('content').innerHTML = xhr.responseText;
            }
        }
        xhr.open('GET', url, true);
        xhr.send();
    }
</script>

文件

我们需要创建两个PHP文件，分别为content1.php和content2.php,用于返回不同的内容。

content1.php：