通过 Ajax 获取 HTML - PHP

简介

Ajax 是前端开发中常用的技术之一，可以实现页面无需重新加载就能获取并更新数据。通过 Ajax 技术，我们可以发送请求到后端服务器，获取 HTML、JSON 或者 XML 等数据格式，再将其渲染到页面上。

在 PHP 中，我们也可以使用 Ajax 技术，通过 PHP 后端返回 HTML 代码，更新前端页面。

本文将讲解如何通过 Ajax 获取 HTML 代码。

代码实现

前端实现

前端代码主要包含了发送 Ajax 请求的代码。

涉及的核心代码如下：

// 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();

// 初始化请求
xhr.open('GET', 'fetch-html.php', true);

// 设置返回数据类型
xhr.responseType = 'document';

// 监听请求状态变化事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取返回的 HTML 代码
        let html = xhr.response.documentElement;

        // 将返回的 HTML 代码插入到页面中
        document.getElementById('content').innerHTML = html.innerHTML;
    }
};

// 发送请求
xhr.send(null);

在代码中，我们首先创建了 XMLHttpRequest 对象，然后通过 open 方法设置请求方法和请求 URL，通过 responseType 属性设置返回的数据类型为 document，然后通过 onreadystatechange 方法监听请求的状态变化，并在请求完成后将返回的 HTML 代码插入到页面中。

后端实现

后端代码主要包含了返回 HTML 代码的 PHP 脚本。

代码如下：

<?php
// 设置头部信息，告诉浏览器返回的数据类型为 HTML
header('Content-Type: text/html; charset=utf-8');

// 获取 HTML 文件内容
$html = file_get_contents('content.html');

// 返回 HTML 代码
echo $html;
?>

在代码中，我们首先设置文件头部信息，告诉浏览器返回的数据类型为 HTML。然后通过 file_get_contents 函数获取 HTML 文件的内容，并通过 echo 函数返回 HTML 代码。

总结

通过 Ajax 获取 HTML 代码，在前端更新页面的时候非常有用，可以让页面无需重新加载就能更新内容，提升用户体验。本文讲解了如何通过 Ajax 获取 PHP 后端返回的 HTML 代码，希望对大家有所帮助。