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

AJAX、PHP、および jQuery を介した DIV コンテンツの動的更新

質問: コンテンツを動的に更新するにはどうすればよいですか? AJAX、PHP、および jQuery を使用して DIV 要素を作成します。リンクをクリックするたびにデータベースからデータが取得され、DIV が取得された概要で置き換えられますか?

答え:

ステップ 1: HTML 構造を作成する

• 概要を表示する DIV 要素を含めます:

<code class="html"><div id="summary"></div></code>

• リストを追加する概要取得プロセスをトリガーするリンクの数:

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

ステップ 2: jQuery スクリプトを実装する

• AJAX リクエストと DIV の更新:

<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // appears as $_GET['id'] @ your backend side
    success: function(data) {
      // data is your summary
      $('#summary').html(data);
    }
  });
}
</script></code>

ステップ 3: クリック イベントをリンクに追加する

• 各リンクに onclick イベントを追加します。対応する ID を渡します:

<code class="html"><a onclick="getSummary('1')">View Text</a></code>

ステップ 4: サーバーサイド PHP

• $ で指定された URL の PHP スクリプト内。 ajax()、受け取った ID に基づいて概要を取得します:

<code class="php">$id = $_GET['id'];
$summary = fetchSummary($id); // Fetch summary from database</code>

• 取得した概要を文字列として返します:

<code class="php">echo $summary;</code>

リンクを指定すると、jQuery 関数が AJAX リクエストをトリガーし、PHP スクリプトから概要を取得し、取得したコンテンツで DIV を更新します。

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