HTML ページの部分更新の実装コード

HTML ページの部分更新の実装コード

イベント応答の更新: 要求されたときのみ更新

1. JS HTML DOM または jQuery を介して HTML 要素を取得し、DOM メソッドまたは jQuery メソッドを介してページ イベントをリッスンし、ユーザー リクエストを取得します。

2. Ajax を介してユーザー リクエストをサーバーに送信します。サーバーは処理後に結果を返し、その後 Ajax がデータを受信します。

3. DOM メソッドまたは jQuery メソッドを介してページにデータを読み込み、イベント応答の更新が完了します。

$('#input_date').keypress(function(e){

  if(e.keyCode=='13'){

    $.ajax({

      タイプ: "POST",

      URL: "inquire_date.php",

      データ: {

        誕生:null、

//1. ユーザーリクエスト(特定のイベントなど)を取得し、処理のためにサーバーに送信します date:$('#input_date input').val()

      },

      データ型: "json",

//2. サーバーからデータを取得する成功: function(data){

        if (データ.成功) {

          var フェスティバル = data.fetivalInquireResult;

//3. 取得したデータをページに読み込み、ページ イベント応答を実装します。refresh$('#show_festival').text(festival);

        } それ以外 {

          $('#show_festival').text("フェスティバルの取得に失敗しました");

        }  

      },

      エラー: function(jqXHR){     

        alert("エラー: " + jqXHR.status);  
      },     

    });

  $('#festival').hide();

  $('#response_festival').show();

  }

});

部分的な自動更新: リクエストがない場合でも部分的なページは自動的に更新されます

1. setTimeout() などのタイマー関数を使用して、Ajax が定期的にサーバーからデータを取得できるようにします。

2. DOM メソッドまたは jQuery メソッドを使用してページにデータを読み込み、ページの一部を自動的に更新します。

$(ドキュメント).ready(関数(e){

    タイムアウトを設定します('updateShow()',0);

});

/*部分的な自動更新ページデータ*/

関数 updateShow(){

  $.ajax({

    タイプ: "GET",

    url: "inquire_date.php?data=" + "問い合わせ",

    データ型: "json",

//1. タイマーを使って定期的にサーバーからデータを取得する success: function(data) {

      if (データ.成功) {

        var agesFormat = data.agesFormat;

        var daysFormat = data.daysFormat;

//2. 自動更新を実現するためにページにデータを読み込みます$('#ages').text(agesFormat);

       $('#days').text(daysFormat);

      } それ以外{

        alert("データの取得に失敗しました");

      }

    },

    エラー: function(jqXHR){     

      alert("エラー: " + jqXHR.status);  

    },

  });

  タイムアウトを設定します('updateShow()',500);

}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQLに絵文字表現を挿入する方法

>>:  Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)

推薦する

LinuxはNetworkManagerを使用してMACアドレスをランダムに生成します

今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...

Linuxでmore、less、catコマンドを使用してファイルの内容を表示します

Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...

MySQL の暗黙的な型変換によって発生するインデックス障害の解決策

目次質問再生暗黙的な変換要約する参照する質問仕事中、1 つの SQL クエリ ステートメントのみを実...

Google 翻訳ツール: 多言語ウェブサイトを素早く実装

Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...

Vue ログインページでクッキーを使用してパスワードを 7 日間記憶する方法

問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...

Navicat が MySQL に接続するときに発生する 1045 エラーの解決方法

ローカル データベースに接続すると、Navicat for MySQL は以下のように 1045 エ...

DockerにNginxをインストールする方法

DockerにNginxをインストールするNginx は、IMAP/POP3/SMTP サービスも提...

Docker ファイルの保存パス、コンテナの起動コマンド操作の取得

コンテナはすでに作成されていますが、その起動パラメータ(データがマウントされる場所)を知る方法 #コ...

mysql8.0.0 winx64.zip 解凍バージョンのインストールと設定のチュートリアル

この記事はmysql8.0.0 winx64.zip解凍版のインストールチュートリアルを記録していま...

MySQL における varchar 型と char 型の違い

目次前述のVARCHAR型VARCHAR適用可能な状況CHAR型テストVARCHAR(5)とVARC...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する

1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...

MySQL 外部キー制約 (FOREIGN KEY) ケースの説明

MySQL 外部キー制約 (FOREIGN KEY) はテーブルの特別なフィールドであり、主キー制約...

MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

Linux で Xfce デスクトップ環境を使用すべき 8 つの理由

いくつかの理由(好奇心も含む)から、数週間前に Linux デスクトップとして Xfce を使い始め...