ホームページ > バックエンド開発 > PHPチュートリアル > AJAX、PHP、jQuery を使用してリスト項目の選択に基づいて DIV コンテンツを動的にロードする方法

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

Mary-Kate Olsen
リリース: 2024-10-21 16:44:02
オリジナル
476 人が閲覧しました

How to Dynamically Load DIV Content Based on List Item Selection with AJAX, PHP, and jQuery?

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>
ログイン後にコピー
  1. 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>
ログイン後にコピー
  1. クリック イベントをリスト項目に追加します:
<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>
ログイン後にコピー
  1. リクエストを処理する PHP スクリプト:

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

<code class="php">$id = $_GET['id'];
$summary = getMovieSummary($id);
echo $summary;</code>
ログイン後にコピー

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

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート