AJAX、PHP、jQuery を使用してリスト項目の選択に基づいて DIV コンテンツを動的にロードする方法

AJAX、PHP、および jQuery を使用した DIV コンテンツの操作

このシナリオでは、DIV 要素のコンテンツをベースに動的に変更することを目的としています。リスト項目の選択時。 AJAX、PHP、jQuery を使用してこれを実現する方法は次のとおりです。

1. DIV とリスト構造を作成します:

<code class="html"><div id="summary">Here is a summary of the movie</div>
<ul>
  <li><a href="?id=1" class="movie">Name of movie 1</a></li>
  <li><a href="?id=2" class="movie">Name of movie 2</a></li>
  ...
</ul></code>

2. AJAX 関数を定義します:

<code class="javascript">function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'your_php_script.php',
    data: "id=" + id,
    success: function(data) {
      $('#summary').html(data);
    }
  });
}</code>

3. クリック イベントをリスト項目に追加します:

<code class="html"><ul>
  <li><a onclick="getSummary(1)">View Text 1</a></li>
  <li><a onclick="getSummary(2)">View Text 2</a></li>
  ...
</ul></code>

4. リクエストを処理する PHP スクリプト:

PHP スクリプトで、$_GET 配列からムービー ID ($id) を取得し、そこから概要を取得します。データベース。次に、それを文字列として返します:

<code class="php">$id = $_GET['id'];
$summary = getMovieSummary($id);
echo $summary;</code>

以上がAJAX、PHP、jQuery を使用してリスト項目の選択に基づいて DIV コンテンツを動的にロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。