ページを更新せずに AJAX を使用して Div のコンテンツを動的に更新するにはどうすればよいですか?

HTML - 更新せずにページの内容を動的に変更します

チャレンジ:

データを取得しましたデータベースから取得し、div に表示します。リンクがクリックされたときに、ページを更新せずに div のコンテンツを更新したいとします。

解決策:

AJAX を利用すると、ページの更新をバイパスして div の内容を更新できます。コンテンツをシームレスに。その仕組みは次のとおりです:

クライアント側 (HTML および JavaScript):

• JavaScript 関数を呼び出すイベント ハンドラーを使用してリンクを作成します。
• これらの JavaScript 関数では、jQuery のload() メソッドを使用して、パラメータを含むリクエストを PHP スクリプトに送信します。 (例: $('#myStyle').load('data.php?id=' id);).

サーバー側 (PHP):

• AJAX リクエストを処理する別の PHP ファイルを作成します。
• Fetch AJAX リクエストから受け取ったパラメータを使用してデータベースからデータを取得します。
• 更新されたコンテンツをブラウザに返します。

例:

<a href="#" onclick="recp('1')"> One   </a>
<a href="#" onclick="recp('2')"> Two   </a>
<a href="#" onclick="recp('3')"> Three </a>

<div>
<pre class="brush:php;toolbar:false">function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

// In data.php
$id = $_GET['id'];
$results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");   
if( mysql_num_rows($results) > 0 )
{
   $row = mysql_fetch_array( $results );
   echo $row['para'];
}

これらの手順に従うと、全体に影響を与えることなく div の内容を動的に更新できます。ページを更新すると、Web サイトの応答性が向上し、使いやすくなります。