jQuery/AJAX を使用してリロードせずに Web ページのセクションを更新する方法

jQuery/AJAX を使用してリロードせずにページの一部を更新する方法

全体に影響を与えずにボタンのクリックで特定の div をリロードするページは Web 開発における一般的な要件です。これは、jQuery の AJAX 機能を使用して実現できます。

例

クリックすると、div1 という div のコンテンツを更新するボタンがあるとします。 。その方法は次のとおりです。

HTML:

<code class="html"><input type="button" id="myButton" value="Update DIV" />

<div id="div1">
    <!-- Content to be updated -->
</div></code>

jQuery:

<code class="javascript">$("#myButton").click(function() {
    $("#div1").load(location.href + " #div1");
});</code>

説明:

• jQuery クリック イベント ハンドラーは、ID myButton のボタンにアタッチされます。
• ボタンがクリックされると、load() 関数は、ID div1 を持つ div で呼び出されます。
• load() 関数は、指定された URL のコンテンツをdiv.
• この場合、URL は location.href " #div1" です。これにより、現在のページの URL が取得され、#div1 セレクターが追加されます。
• 2 番目の # 記号の前のスペースが重要です。これがないと、上記のコードは div 内のページ全体をリロードします。
• その結果、ボタンをクリックすると、div1 のコンテンツが同じコンテンツで更新されます。現在のページから div を取得します。

注: 上記のコードを使用する前に、必ず jQuery ライブラリを含めてください。

以上がjQuery/AJAX を使用してリロードせずに Web ページのセクションを更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。