AJAX と jQuery を使用して、更新せずに Web ページ データを更新するにはどうすればよいですか?

更新せずにページ上のデータを更新する: AJAX および jQuery ソリューション

完全な更新を必要とせずに Web ページ上の動的コンテンツを更新するページのリロードは、インタラクティブで魅力的なユーザー エクスペリエンスにとって重要な要件です。これは、バックグラウンドでのデータのロードと更新を可能にする技術である Asynchronous JavaScript and XML (AJAX) を使用して実現できます。

AJAX を実装する最も一般的で便利な方法の 1 つは、jQuery のload() を使用することです。方法。このメソッドは、サーバーからデータを非同期にロードし、ページ上の特定の要素を更新するためのシンプルで汎用性の高いソリューションを提供します。

load() メソッドを使用するには、データ ソースの URL とターゲット HTML 要素を指定します。ロードされたデータが配置される場所。このメソッドは、サーバーにデータを送信し、リクエストの完了時に実行するコールバック関数を定義するためのオプションのパラメーターをサポートしています。

load() メソッドの構文の内訳は次のとおりです。

$(selector).load(url, data, complete);

• selector: ロードされたデータを受け取る HTML 要素の jQuery セレクター。
• url:動的にロードされるデータ ソース。
• data (オプション): リクエストとともにサーバーに送信されるデータのキーと値のペア。
​​
• complete (オプション): コールバック関数リクエストが完了したときに実行されます。

たとえば、フライトのステータスを更新するシナリオを考えてみましょう。 (出発、巡航、着陸など) ユーザーがページ全体をリロードする必要はありません。 AJAX と jQuery を組み合わせてこれを実現できます。

$(function() {

  // Specify the server/url you want to load data from
  var url = "https://api.example.com/flight-status";

  // On page load, load the initial flight status into the #flight-status div
  $("#flight-status").load(url);

  // Set up an interval to periodically load the updated flight status (e.g., every 5 seconds)
  setInterval(function() {
    $("#flight-status").load(url);
  }, 5000);

});

この例では、最初に指定された URL からフライト ステータスを #flight-status div に読み込みます。次に、更新されたステータス情報を 5 秒ごとに定期的に読み込む間隔を設定します。その結果、ユーザーのページ操作を中断することなく、フライト状況がリアルタイムで更新されます。

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