异步加载：先显示页面主体，再插入耗时函数结果-php教程-PHP中文网

异步加载：先显示页面主体，再插入耗时函数结果

碧海醫心

发布： 2025-09-18 22:16:23

原创

435人浏览过

异步加载：先显示页面主体，再插入耗时函数结果

本文介绍了一种使用客户端渲染（如 AJAX）解决 PHP 页面中耗时函数导致页面加载缓慢的问题。通过将耗时函数的执行放在客户端，可以先快速显示页面的主体内容，然后异步加载耗时函数的结果，从而提升用户体验。本文将详细讲解如何使用 AJAX 实现这一目标，并提供示例代码供参考。

PHP 是一种服务器端语言，其执行流程是从上到下，直到脚本结束才将所有内容发送到浏览器。因此，如果页面中包含耗时的函数，会导致整个页面加载缓慢，影响用户体验。一种常见的解决方案是使用客户端渲染，即先快速加载页面的主体内容，然后通过 JavaScript 异步加载耗时函数的结果。

使用 AJAX 实现异步加载

AJAX (Asynchronous JavaScript and XML) 是一种允许网页在不重新加载整个页面的情况下更新部分内容的 Web 技术。我们可以利用 AJAX 将耗时函数的执行放在客户端，从而实现先显示页面主体，再插入函数结果的效果。

步骤如下：

HTML 结构： 在页面中预留一个容器，用于显示耗时函数的结果。

<div id='part1'>
    <p>这里是内容的第一部分</p>
</div>
<div id='part2'>
    <p>第二部分内容，稍后加载...</p>
</div>
<div id='part3'>
    <p>这里是内容的第三部分</p>
</div>

登录后复制

PHP 后端： 创建一个 PHP 脚本，用于执行耗时函数并返回结果。

<?php
// long_function.php
function long_function() {
    // 模拟耗时操作
    sleep(3);
    $part2_content = "<b>这是耗时函数的结果！</b>";
    return $part2_content;
}

echo long_function();
?>

登录后复制

JavaScript 代码： 使用 AJAX 从 PHP 脚本获取结果，并将其插入到页面中的容器。

先见AI
数据为基，先见未见

95

查看详情
```
$(document).ready(function() {
    $.ajax({
        url: "long_function.php", // PHP 脚本的 URL
        type: "GET", // 请求类型
        dataType: "html", // 返回数据类型
        success: function(data) {
            $("#part2").html(data); // 将结果插入到容器中
        },
        error: function(xhr, status, error) {
            console.error("AJAX 请求失败:", status, error);
            $("#part2").html("<p>加载数据失败！</p>"); // 显示错误信息
        }
    });
});
```
登录后复制
代码解释：
- $(document).ready(function() { ... });：确保页面加载完成后执行 JavaScript 代码。
- $.ajax({ ... });：发起 AJAX 请求。
- url: "long_function.php"：指定请求的 PHP 脚本。
- type: "GET"：指定请求类型为 GET。
- dataType: "html"：指定返回的数据类型为 HTML。
- success: function(data) { ... }：请求成功后执行的回调函数。data 参数包含 PHP 脚本返回的结果。
- $("#part2").html(data);：将结果插入到 ID 为 part2 的容器中。
- error: function(xhr, status, error) { ... }：请求失败后执行的回调函数。
引入 jQuery： 确保在 HTML 页面中引入 jQuery 库，因为上述 JavaScript 代码使用了 jQuery 的 AJAX 功能。
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```
登录后复制

完整示例：

<!DOCTYPE html>
<html>
<head>
    <title>异步加载示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: "long_function.php",
                type: "GET",
                dataType: "html",
                success: function(data) {
                    $("#part2").html(data);
                },
                error: function(xhr, status, error) {
                    console.error("AJAX 请求失败:", status, error);
                    $("#part2").html("<p>加载数据失败！</p>");
                }
            });
        });
    </script>
</head>
<body>

    <div id='part1'>
        <p>这里是内容的第一部分</p>
    </div>
    <div id='part2'>
        <p>第二部分内容，稍后加载...</p>
    </div>
    <div id='part3'>
        <p>这里是内容的第三部分</p>
    </div>

</body>
</html>

登录后复制