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

更新せずに HTML ページのコンテンツを更新する

Web ページのコンテンツを再読み込みせずに動的に更新するには、AJAX (非同期 JavaScript および XML) を使用します。雇用されている。この記事では、PHP、jQuery、JavaScript を使用してこれを実現する方法について説明します。

アプローチ

onclick ハンドラーはクライアント側で実行されるため、PHP 関数を直接呼び出すことは実現できません。代わりに、AJAX を利用した JavaScript 関数を使用して PHP スクリプトを呼び出し、必要なデータを取得します。

実装

1. jQuery 関数の作成:

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

2. 別個の PHP スクリプト (data.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>

3. HTML 統合:

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

仕組み

• リンクをクリックすると、recp() 関数が呼び出されます。 .load() は、ID をパラメーターとして使用して data.php のコンテンツを取得します。
• data.php は、必要なデータベース クエリを実行し、指定された ID の para 値を返します。
• jQuery の更新#myStyle 要素の内容と戻り値を組み合わせて、更新せずにページを効果的に更新します。

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