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

更新せずにページ コンテンツを動的に変更する

問題:

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

解決策:

これを実現するには、AJAX (非同期 JavaScript およびXML) を使用すると、ページをリロードせずにサーバーに対して非同期リクエストを行うことができます。実装方法は次のとおりです。

1. JavaScript 関数を作成します:

JavaScript 関数をトリガーする onclick イベント ハンドラーをリンクに追加します。この関数は、AJAX を使用して PHP スクリプトにリクエストを行い、更新されたデータを取得します。

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

2. AJAX リクエストの追加:

JavaScript 関数で、jQuery $.load() メソッドを使用して、データをフェッチするコードを含む PHP スクリプトに AJAX リクエストを送信します。

3. PHP スクリプトを作成します:

AJAX リクエストを処理する別の PHP ファイル (例: data.php) を作成します。このスクリプトは次のことを行う必要があります。

1. データベースに接続します。
2. リクエストで渡された id パラメータに基づいてデータを取得します。
3. 取得したデータをクライアントに返します。 .

<code class="php"><?php
// Connect to database
require ('myConnect.php');

// Get the ID parameter
$id = $_GET['id'];

// Fetch data from database
$results = mysql_query("SELECT para FROM content WHERE para_ID='$id'");

// Check if data exists
if( mysql_num_rows($results) > 0 ) {
  $row = mysql_fetch_array( $results );
  echo $row['para'];
}
?></code>

4． Div コンテンツの更新:

PHP スクリプトからの応答は、ID が「myStyle」の div に表示されます。 div のコンテンツは、ページを再ロードせずに動的に更新されます。

追加の注意事項:

• AJAX リクエスト URL とデータベース接続を調整する必要がある場合があります。特定の環境に合わせて JavaScript および PHP スクリプトの設定を変更します。
• オンライン リソースを参照したり、非同期プログラミングの理解を深めるためのコースを受講したりすることで、AJAX について詳しく学ぶことができます。

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