使用AJAX動態加載盒內容

>本教程演示了創建通過Ajax加載的動態頁面框，從而可以即時刷新而無需全頁重新加載。 它利用jQuery和JavaScript。將其視為自定義Facebook風格的內容框加載程序。

密鑰概念：

• ajax和jQuery在沒有完整頁面重新加載的情況下動態加載和刷新頁面框，鏡像Facebook和Twitter等網站的功能。
>
• 該過程涉及在DOM準備就緒後加載框，使用每個框的AJAX函數，顯示加載消息，並使用服務器端腳本（例如PHP）返回每個框的HTML。然後將此HTML插入網頁上的相應框中。 >
>系統的動力學源於使用每個框的
• 屬性生成變量，然後將其與服務器端腳本匹配。 內容很容易重新加載，並且可以在沒有額外CSS或JavaScript的情況下添加新盒子。 id>
這種AJAX方法的優點

：

由於DOM準備就緒後，由於內容框加載而引起的更快的頁面加載時間。 >
• 內容刷新在沒有完整頁面重新加載的框中。
>
• 與主要平台（Facebook，Twitter等）使用的現代網絡開發實踐保持一致。
>
• 添加新框不需要其他CSS或JavaScript代碼。
• 它的工作方式：

頁面加載後，jQuery調用每個框的ajax函數。 > 顯示加載消息。

>服務器端腳本（例如，PHP）返回框的HTML。

內容已加載到框中。
1. >內容可以通過懸停在盒子上揭示刷新圖像來輕鬆重新加載；單擊此圖像會觸發內容刷新。
3. 動態功能：
每個盒子都是
5. ，帶有唯一的中的元素使用相同的

。 jQuery使用此

與服務器端腳本匹配，使系統動態化，因為所有變量都是基於盒子的。

jQuery代碼：

<div> <code>id此代碼在頁面加載後運行，初始化框控件和附加事件。 > <div> <code>id此功能基於提供的id>將內容加載到子id中。 它動態創建變量來處理對象。 用於識別容器

和相應的PHP腳本（例如，）。

> html代碼（示例）：

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

<div>> css代碼：<ancim> <code>box_id

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

>圖像：

• loader.gif
• refresh.png

（省略了原始輸入的FAQ部分，因為它是一般AJAX使用的單獨的，無關的部分。）