jQuery、Ajax、PHP を使用して DIV コンテンツを動的に更新する方法

jQuery、Ajax、および PHP を使用した DIV コンテンツの動的更新

動的コンテンツを含む DIV を含む Web ページがあるシナリオを考えてみましょう。データベースから:

<div id="summary">Here is a summary of movie</div>

さらに、リンクのリストがあります:

<a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a>
..

ユーザーがリンクをクリックしたとき:

1. GET データを含む Ajax リクエスト: ページは、リンクの URL を使用して Ajax リクエストを送信し、GET 経由でデータを PHP ファイル (通常は同じページ) に渡します。
2. 文字列付きの PHP レスポンス: PHP ファイルはリクエストを処理し、概要テキストを含む文字列を返します。
3. DIV コンテンツ更新: jQuery を使用すると、DIV の #summary 要素が返された文字列で更新されます。

この機能を実装するには:

<code class="javascript">function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // accessible as $_GET['id'] in PHP
    success: function(data) {
      $('#summary').html(data);
    }
  });
}</code>

HTML で、各リンクに onclick イベントを追加します:

<code class="html"><a onclick="getSummary('1')">View Text</a>
<div id="#summary">This text will be replaced when the link is clicked.</div></code>

以上がjQuery、Ajax、PHP を使用して DIV コンテンツを動的に更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。