如何不跳转页面执行php代码

如果你正在寻找一种方法，在不跳转页面的情况下执行PHP代码，那么恭喜你，今天的内容可能会为你带来答案，在这个技术飞速发展的时代，作为一名开发者，掌握多种技能尤为重要，PHP作为一种服务器端脚本语言，广泛应用于网站开发中，如何在不刷新页面的情况下执行PHP代码呢？下面我将一步步为你揭晓答案。

我们需要了解在不跳转页面的情况下执行PHP代码的几种常用方法，这些方法各有特点,可以根据实际需求选择最适合你的那一种。

AJAX

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据和更新部分网页的技术,使用AJAX可以轻松实现不跳转页面执行PHP代码。

创建一个HTML文件,并在其中添加一个按钮和一个用于显示结果的元素。

<!DOCTYPE html>
<html>
<head>
    <title>不跳转页面执行PHP代码</title>
</head>
<body>
    <button id="btn">点击我</button>
    <div id="result"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $.ajax({
                    url: "test.php",
                    type: "POST",
                    success: function(data){
                        $("#result").html(data);
                    }
                });
            });
        });
    </script>
</body>
</html>

创建一个名为test.php的PHP文件,并写入以下代码：

<?php
echo "Hello, World!";
?>

将HTML文件和PHP文件放在同一个目录下，并在浏览器中打开HTML文件，点击按钮后，页面不会跳转,但会显示PHP文件中的内容。

JavaScript + iframe

另一种不跳转页面执行PHP代码的方法是使用JavaScript和iframe，这种方法相对较老,但在某些场景下仍然适用。

创建一个HTML文件,并在其中添加一个iframe元素和一个按钮。

<!DOCTYPE html>
<html>
<head>
    <title>不跳转页面执行PHP代码</title>
</head>
<body>
    <button id="btn">点击我</button>
    <iframe id="iframe" style="display:none;"></iframe>
    <script>
        document.getElementById("btn").addEventListener("click", function(){
            var iframe = document.getElementById("iframe");
            iframe.src = "test.php";
            iframe.onload = function(){
                alert(iframe.contentWindow.document.body.innerHTML);
            };
        });
    </script>
</body>
</html>