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

AJAX を使用して再ロードせずに HTML ページのコンテンツを変更する

リンクが更新されていないときに、ページを更新せずに DIV 要素のコンテンツを更新したいとします。クリックしました。 PHP と AJAX を使用してこれを実現する方法は次のとおりです。

PHP 構成:

• に接続する PHP スクリプト (例: data.php) を作成します。

HTML マークアップ:

• 識別子 (例: myStyle) を持つ DIV 要素を作成します。 .
• ID を引数として JavaScript 関数を呼び出す onClick ハンドラーを使用してリンクを追加します。

jQuery を使用した JavaScript:

• jQuery ライブラリをインクルードします。
• AJAX を使用して data.php から myStyle DIV にデータをロードする recp 関数を定義します。

コード例:

HTML:

<code class="html"><script type="text/javascript">
  function recp(id) {
    $('#myStyle').load('data.php?id=' + id);
  }
</script>

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

<div id='myStyle'>
</div></code>

PHP:

<code class="php"><?php
  require ('myConnect.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'];
  }
?></code>

このソリューションを実装したら、リンクは、ページをリロードせずに myStyle DIV のコンテンツを更新します。

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