Ajaxを使用して動的にボックスコンテンツをロードします

このチュートリアルは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。それをカスタムFacebookスタイルのコンテンツボックスローダーと考えてください。

重要な概念：

ajaxとjqueryは、完全なページリロードなしでページボックスを動的にロードして更新し、FacebookやTwitterなどのサイトの機能を反映しています。

プロセスには、DOMの準備ができた後にボックスをロードすることが含まれます。各ボックスのAJAX関数を使用して、ロードメッセージを表示し、サーバー側のスクリプト（PHPなど）を使用して各ボックスのHTMLを返します。このHTMLは、Webページ上の対応するボックスに挿入されます。
• システムのダイナミズムは、各ボックスの
属性を使用して変数を生成することに起因し、サーバー側のスクリプトと一致します。 コンテンツは簡単にリロードでき、新しいボックスを追加のCSSまたはJavaScriptなしで追加できます。
• このAJAXアプローチの利点：
• id
DOMの準備ができた後のコンテンツボックスの読み込みにより、ページの読み込み時間が高くなります。

フルページのリロードなしでボックス内でコンテンツを更新します。

主要なプラットフォーム（Facebook、Twitterなど）が使用する最新のWeb開発プラクティスと一致しています。 新しいボックスを追加するには、追加のCSSまたはJavaScriptコードが必要ありません。

• それがどのように機能するか：

ページの読み込み後、jQueryは各ボックスのajax関数を呼び出します。

ロードメッセージが表示されます。

サーバー側のスクリプト（例えば、PHP）がボックスのHTMLを返します。

コンテンツはボックスにロードされます。 コンテンツは、箱の上にホバリングすることで簡単にリロードされ、更新画像が表示されます。この画像をクリックすると、コンテンツの更新がトリガーされます

1. 動的機能：
2. 各ボックスは、一意の
属性を備えた
3. です。 これの中の要素は、同じ
を使用します。 jQueryはこれを使用してサーバー側のスクリプトと一致し、すべての変数がボックスの
4. に基づいて生成されるため、システムを動的にします。
5. jqueryコード：

このコードは、ページの読み込み、ボックスコントロールの初期化、イベントの添付後に実行されます。 この関数は、提供された

に基づいて、コンテンツを子供にロードします

。 オブジェクトを処理する変数を動的に作成します。 <div>は、コンテナ<code>idと対応するPHPスクリプト（例：<div>）の両方を識別するために使用されます。 <code>id ididhtmlコード（例）：

cssコード：

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

（元の入力からのFAQSセクションは、一般的なAJAXの使用に関する別の無関係なセクションであったため省略されました。）