JavaScriptはフォームデータの非同期取得を実装します

この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。

前回の記事では、JavaScript を使用してフォームでデータを非同期に送信する方法について説明しました。今日は、JavaScript を使用してフォームでデータを非同期に取得する方法について説明します。さっそく読み進めていきましょう。

効果図は以下のとおりです。

下の図に示すように、「データを取得」をクリックしてデータを取得します。

HTML部分は次のとおりです。

 <div class="コンテナ">
       <form class="form-horizontal" onsubmit="return false;">
           <div class="フォームグループ">
               <label class="control-label col-md-3">名前:</label>
               <div class="col-md-4">
                   <input type="type" name="txtname" value=" " class="form-control" id="txtName"/>
               </div>
           </div>
           <div class="フォームグループ">
               <label class="control-label col-md-3">性別:</label>
               <div class="col-md-4">
                   <select class="form-control" name="cboSex" id="cboSex">
                       <option>--選択してください</option>
                       <option>男性</option>
                       <option>女性</option>
                   </選択>
               </div>
           </div>
           <div class="フォームグループ">
               <label class="control-label col-md-3">住所:</label>
               <div class="col-md-4">
                   <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
               </div>
           </div>
           <div class="フォームグループ">
               <button class="btn btn-primary col-md-offset-4" onclick="getVal()">フォームの値を取得します</button>
               <button class="btn btn-primary" onclick="postgetData()">データを送信</button>
               <button class="btn btn-success" onclick="getData()">データを取得</button>
           </div>
       </フォーム>
</div>

JavaScript 部分は次のとおりです。

 関数 getData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = 新しい XMLHttpRequest();
            } それ以外 {
                xhr = ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getInformation", true);
            xhr.send();
            xhr.onreadystatechange = 関数 () {
                xhr.status == 200 && xhr.readyState == 4 の場合 {
                    var txt = xhr.responseText; //xhr の戻り値を取得します。 var obj = JSON.parse(txt); //文字列を js オブジェクトに解析します。 document.getElementById("txtName").value = obj.name;
                    document.getElementById("cboSex").value = obj.sex;
                    document.getElementById("txtAddress").value = obj.address;
                }
            }
        }

サーバーにリクエストを送信する

サーバーにリクエストを送信するには、XMLHttpRequest オブジェクトの open() メソッドと send() メソッドを使用します。
open(method,url,async) は、リクエストのタイプ、URL、およびリクエストを非同期で処理するかどうかを指定します。

1. 同期と非同期とは何ですか?

同期とは、プロセスがリクエストを実行するときに、リクエストが情報を返すのに時間がかかる場合、プロセスは返された情報を受信するまで待機してから実行を続行することを意味します。
非同期とは、プロセスが常に待機する必要がなく、他のプロセスの状態に関係なく、次の操作を実行し続けることを意味します。
メッセージが返されると、システムはプロセスにそれを処理するように通知し、実行効率を向上させることができます。

非同期実装:

1. HTMLとCSSを使用してページを実装し、情報を表現する
2. XMLHttpRequestとWebサーバーを使用して非同期にデータを交換する
3. JavaScriptを使用してDOMを操作し、動的な部分更新を実現する

2. XMLHttpRequest オブジェクトとは何ですか?

XMLHttpRequest オブジェクトは、バックグラウンドでサーバーとデータを交換するために使用されます (詳細については、w3c を参照してください)
XMLHttpRequestオブジェクトを作成します。すべての最新ブラウザ（IE7+、Firefox、Chrome、Safari、Opera）には、
XMLHttpRequest オブジェクト。
XMLHttpRequest オブジェクトを作成するための構文は次のとおりです。

var xhr = 新しい XMLHttpRequest();

Internet Explorer の古いバージョン (IE5 および IE6) では、ActiveXObject オブジェクトが使用されます。

var xhr = 新しい ActiveXObject("Microsoft.XMLHTTP");

IE5 や IE6 を含むすべての最新ブラウザで動作させるには、ブラウザが XMLHttpRequest オブジェクトをサポートしているかどうかを確認してください。サポートされている場合は、XMLHttpRequest オブジェクトが作成されます。サポートされていない場合は、ActiveXObject を作成します。

var xhr;
     if (window.XMLHttpRequest) {
                  // IE7+、Firefox、Chrome、Opera、Safari 用のコード
                    xhr = 新しい XMLHttpRequest();
                } それ以外 {
                    // IE6、IE5 用のコード
                    xhr = 新しい ActiveXObject("Microsoft.XMLHTTP");
                }

3. サーバーにリクエストを送信する

コントローラーメソッドは次のとおりです。

パブリックアクション結果 getInformation()
        {
            string str = "{\"name\":\"三三\",\"sex\":\"男\",\"address\":\"南城区\"}";
            Content(str)を返します。
        }

要約する

本日は以上がお話の内容です。この記事では、フォームデータの非同期取得の使い方について簡単に紹介します。

以下もご興味があるかもしれません: