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

JavaScript と AJAX を使用して更新せずにページのコンテンツを更新する

次を使用すると、ページを更新せずに div のコンテンツを更新する機能を実現できます。 JavaScript と AJAX。その方法は次のとおりです。

onclick ハンドラーはブラウザーで実行されるため、PHP 関数を直接呼び出すことはできません。代わりに、AJAX を使用して PHP スクリプトからデータをフェッチする JavaScript 関数を追加します。 jQuery を使用すると、次のコードを使用できます。

function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

別の PHP ファイル (この例では data.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'];
}

In HTML を編集するには、JavaScript 関数を利用するようにリンクを更新します:

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

<div>

これらのリンクをクリックすると、div のコンテンツが表示されます。 (ID 'myStyle') はページを再読み込みせずに更新されます。 jQuery 関数は、AJAX 経由で PHP スクリプトからデータを動的にロードするため、ユーザーはページの更新を待たずに更新された情報を確実に確認できます。

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