要在PHP中使用Ajax實現局部刷新,你需要遵循以下步驟:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Ajax Example</h1>
<button id="loadData">Load Data</button>
<div id="content"></div>
<script>
$(document).ready(function() {
$("#loadData").click(function() {
$.ajax({
url: 'load_data.php', // PHP文件的路徑
type: 'GET',
success: function(response) {
$("#content").html(response);
},
error: function() {
alert("Error loading data.");
}
});
});
});
</script>
</body>
</html>
<?php
// 在這里編寫你的PHP代碼,例如從數據庫獲取數據
$data = '<h2>Data loaded from PHP file</h2>';
echo $data;
?>
在這個例子中,我們使用了jQuery庫來簡化Ajax請求。當用戶點擊"Load Data"按鈕時,JavaScript代碼會發送一個Ajax請求到load_data.php
文件。成功獲取數據后,將返回的HTML內容插入到#content
元素中,實現局部刷新。