AJAX（Asynchronous JavaScript and XML）是一種基于前端技術(shù)的異步通信方式，可以實(shí)現(xiàn)在不刷新整個(gè)頁(yè)面的情況下，與服務(wù)器進(jìn)行數(shù)據(jù)交互和更新頁(yè)面內(nèi)容。其中，PHP是一種服務(wù)器端語(yǔ)言，可以處理客戶端請(qǐng)求，并返回所需的數(shù)據(jù)。本文將介紹一個(gè)簡(jiǎn)單的圖片相冊(cè)的源代碼，通過(guò)AJAX和PHP的配合，實(shí)現(xiàn)無(wú)刷新加載圖片和切換相冊(cè)的功能。

首先，我們需要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)圖片的文件夾，并在該文件夾下放置一些圖片。以下是該文件夾的目錄結(jié)構(gòu)：

- photo_gallery
- index.php
- gallery1
- image1.jpg
- image2.jpg
- gallery2
- image3.jpg
- image4.jpg

接下來(lái)，我們需要編寫一個(gè)index.php文件作為前端頁(yè)面的入口。在index.php文件中，我們使用AJAX技術(shù)與后臺(tái)的PHP文件進(jìn)行通信，并通過(guò)動(dòng)態(tài)加載圖片的方式實(shí)現(xiàn)圖片相冊(cè)的展示。以下是index.php的代碼：

<?php
$gallery = $_GET['gallery']; // 獲取前端傳遞的相冊(cè)參數(shù)
if ($gallery == 'gallery1') {
$image1 = 'photo_gallery/gallery1/image1.jpg';
$image2 = 'photo_gallery/gallery1/image2.jpg';
echo '<img src="'.$image1.'" />';
echo '<img src="'.$image2.'" />';
} elseif ($gallery == 'gallery2') {
$image3 = 'photo_gallery/gallery2/image3.jpg';
$image4 = 'photo_gallery/gallery2/image4.jpg';
echo '<img src="'.$image3.'" />';
echo '<img src="'.$image4.'" />';
}
?>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function() {
// 默認(rèn)加載第一個(gè)相冊(cè)的圖片
loadGallery('gallery1');
// 監(jiān)聽相冊(cè)切換的點(diǎn)擊事件
$('.gallery-button').click(function() {
var gallery = $(this).data('gallery');
loadGallery(gallery);
});
});
function loadGallery(gallery) {
$.ajax({
url: 'index.php',
type: 'GET',
data: {gallery: gallery},
success: function(response) {
$('.gallery-images').html(response);
}
});
}
</script><div class="gallery-buttons"><button class="gallery-button" data-gallery="gallery1">Gallery 1</button><button class="gallery-button" data-gallery="gallery2">Gallery 2</button></div><div class="gallery-images"></div>

在上述代碼中，我們通過(guò)PHP的if語(yǔ)句判斷前端傳遞的相冊(cè)參數(shù)，根據(jù)不同的參數(shù)來(lái)加載不同的相冊(cè)圖片。在index.php文件的底部，我們使用jQuery庫(kù)來(lái)監(jiān)聽相冊(cè)切換按鈕的點(diǎn)擊事件，并調(diào)用loadGallery函數(shù)來(lái)加載對(duì)應(yīng)的相冊(cè)。

上述代碼中使用了data屬性來(lái)存儲(chǔ)相冊(cè)參數(shù)，并通過(guò)jQuery的.data()方法進(jìn)行獲取。loadGallery函數(shù)通過(guò)AJAX請(qǐng)求與后臺(tái)的index.php文件通信，將相冊(cè)參數(shù)傳遞給后臺(tái)，后臺(tái)根據(jù)參數(shù)來(lái)加載對(duì)應(yīng)的圖片，并將圖片內(nèi)容返回給前端。在success回調(diào)函數(shù)中，我們使用$('.gallery-images')的html()方法將返回的圖片內(nèi)容插入到頁(yè)面中。

通過(guò)這種方式，我們可以動(dòng)態(tài)加載不同相冊(cè)的圖片，實(shí)現(xiàn)圖片相冊(cè)的切換和展示。這是一個(gè)簡(jiǎn)單的AJAX和PHP的應(yīng)用案例，可以根據(jù)實(shí)際需求進(jìn)行擴(kuò)展和優(yōu)化。