Ajax、PHP、jQuery を使用して DIV コンテンツを動的に更新するにはどうすればよいですか?

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

Web 開発では、ページ全体を再ロードせずにページの一部を更新することが必要になることがよくあります。これは、Ajax、PHP、および jQuery を使用して実現できます。

問題ステートメント

ページには、データベース ソースのテキストとハイパーリンクのリストを保持する DIV 要素が含まれています。目的は、特定のリンクをクリックしたときに、そのリンクに関連付けられた概要 (テキスト) を DIV にロードすることです。

Solution

HTML:

説明に従って DIV とリンク要素を作成します:

<code class="html"><div id="summary">Here is summary of movie</div>

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

JavaScript (jQuery):

リンクのクリック イベントを処理します:

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

PHP:

PHP ファイルでの GET リクエストの処理:

<code class="php">// get the ID from the request
$id = $_GET['id'];

// fetch the summary from the database
$summary = get_summary($id);

// return the summary as a string
echo $summary;</code>

イベント バインディング:

追加getsummary 関数を呼び出すためのリンクへの onclick イベント属性:

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

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