リロードせずに AJAX を使用して Web ページのコンテンツを動的に更新する方法

再読み込みせずに HTML ページのコンテンツを動的に変更する

ページをトリガーせずに、Web ページのコンテンツ、特に div を動的に更新したいと考えています。リフレッシュします。これは、AJAX (非同期 JavaScript および XML) を通じて実現できます。

jQuery アプローチ

1. JavaScript 関数の定義:

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

2. イベント ハンドラーの追加:
   HTML 内の onClick ハンドラーを recp 関数で置き換えます:

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

3. PHP スクリプトの作成:
   データの取得を処理する data.php などの別の PHP ファイルを作成します:

   <code class="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>

4. データを動的にロード:
   リンクがクリックされると、recp 関数は AJAX を使用して data.php から ID 'myStyle' の div にデータをロードします:

   <code class="html"><div id='myStyle'>
   </div></code>

注: jQueryload() 関数の data.php へのパスが正しいこと、および PHP ファイルに適切な権限があることを確認してください。

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