当前位置：首页 > PHP

php不刷新实现

2026-02-15 17:35:52PHP

PHP 不刷新实现的方法

在 PHP 中实现不刷新页面更新内容通常需要结合前端技术（如 JavaScript 和 AJAX）来完成。以下是几种常见的方法：

AJAX 请求

使用 AJAX（Asynchronous JavaScript and XML）可以在不刷新页面的情况下与服务器交换数据并更新部分页面内容。以下是一个简单的示例：

// JavaScript 代码
function loadData() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'get_data.php', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('content').innerHTML = xhr.responseText;
        }
    };
    xhr.send();
}

// 定时调用
setInterval(loadData, 5000); // 每5秒更新一次

对应的 PHP 文件 get_data.php 可以返回需要更新的内容：

<?php
echo "当前时间: " . date('Y-m-d H:i:s');
?>

Fetch API

现代浏览器支持 Fetch API，可以更简洁地实现 AJAX 功能：

fetch('get_data.php')
    .then(response => response.text())
    .then(data => {
        document.getElementById('content').innerHTML = data;
    });

jQuery AJAX

如果项目中使用了 jQuery，可以简化 AJAX 调用：

$.ajax({
    url: 'get_data.php',
    success: function(data) {
        $('#content').html(data);
    }
});

WebSocket

对于需要实时更新的场景，可以使用 WebSocket 技术建立持久连接：

var socket = new WebSocket('ws://yourserver.com/socket.php');
socket.onmessage = function(event) {
    document.getElementById('content').innerHTML = event.data;
};

Server-Sent Events (SSE)

SSE 是一种服务器推送技术，适用于单向实时更新：

var eventSource = new EventSource('sse.php');
eventSource.onmessage = function(event) {
    document.getElementById('content').innerHTML = event.data;
};

对应的 PHP 文件 sse.php 需要设置正确的头信息：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

echo "data: " . date('Y-m-d H:i:s') . "\n\n";
flush();
?>

隐藏 iframe 技术

较老的技术是使用隐藏的 iframe 来加载内容：

<iframe id="hiddenFrame" style="display:none;"></iframe>
<script>
document.getElementById('hiddenFrame').onload = function() {
    var content = this.contentDocument.body.innerHTML;
    document.getElementById('content').innerHTML = content;
};
</script>

表单提交不刷新

使用 AJAX 提交表单数据：

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    fetch('process_form.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById('result').innerHTML = data;
    });
});