ページをリロードせずに HTML ページのコンテンツを動的に更新するにはどうすればよいですか?

HTML ページのコンテンツを動的に変更する

ページを再読み込みせずに Web コンテンツを更新すると、ユーザー エクスペリエンスが向上し、Web サイトのパフォーマンスが向上します。これを実現するには、AJAX (非同期 JavaScript および XML) を HTML、PHP、JavaScript、および jQuery と組み合わせて利用できます。

次の例を考えてみましょう:

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

<div>

このコードはリンクを表示しますデータベースからさまざまなコンテンツを取得します。リンクをクリックしたときにページを再読み込みする代わりに、AJAX を使用してデータを非同期にフェッチし、ページを更新せずに「myStyle」 div のコンテンツを更新する必要があります。

これを実現するには、次の JavaScript 関数:

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

この関数は、jQuery のload() メソッドを使用して、別の PHP スクリプトからコンテンツをフェッチします。 ("data.php") を作成し、"myStyle" div のコンテンツを取得したデータで置き換えます。

PHP スクリプト ("data.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'];
}

このアプローチを実装すると、ページを再読み込みせずにページのコンテンツを動的に更新できるため、ユーザーは Web サイトでさまざまなコンテンツにアクセスしながら、Web サイトをシームレスに移動できるようになります。要求します。

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