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>
                   </選択>
               </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 部分は次のとおりです。

関数 postgetData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = 新しい XMLHttpRequest();
            } それ以外 {
                xhr = 新しい ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getDataRequest", true);
            xhr.setRequestHeader("コンテンツタイプ", "application/x-www-form-urlencoded");
            var yy = "name=" + document.getElementById("txtName")
                .value + "&sex=" + document.getElementById("cboSex")
                .value + "&address=" + document.getElementById("txtAddress").value;
            xhr.send(yy);
            xhr.onreadystatechange = 関数 () {
                xhr.status == 200 && xhr.readyState == 4 の場合 {
                    var txt = xhr.responseText;
                    コンソールログ(txt);
                }
            }
        }

xhr.send(data); //データフォームで送信されるデータ（文字列）

setRequestHeader 構文:

setRequestHeader(header,value): リクエストに HTTP ヘッダーを追加します。
ヘッダー: ヘッダーの名前を指定します
値: ヘッダーの値を指定します
1-5 AJAX - サーバー応答 XMLHttpRequest オブジェクトの responseText または responseXML プロパティを使用して、サーバーからの応答を取得します。
responseText: 応答データを文字列形式で取得します。
responseXML: 応答データを XML 形式で取得します。
onreadystatechange イベント readyState が変化するたびに、onreadystatechange イベントがトリガーされます。
readyState プロパティは、XMLHttpRequest のステータス情報を保持します。以下は、XMLHttpRequest オブジェクトの 3 つの重要なプロパティです。
onreadystatechange: readyState プロパティが変更されるたびに呼び出される関数 (または関数名) を格納します。
readyState: XMLHttpRequest の状態を保持します。 0 から 4 まで変化します。
0: リクエストは初期化されていません
1: サーバー接続が確立されました
2: リクエスト受信
3: リクエスト処理
4: リクエストが完了し、応答の準備ができました
ステータス: 200: “OK” 404: ページが見つかりません onreadystatechange イベントでは、サーバー応答を処理する準備ができたときに実行するタスクを指定します。
readyState が 4 でステータスが 200 の場合、応答の準備ができていることを意味します。

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

Request.Form（送信方法はpost）

パブリックアクション結果 getDataRequest()
        {
            文字列名 = Request.Form["名前"];
            文字列 性別 = Request.Form["性別"];
            文字列アドレス = Request.Form["アドレス"];
            string str = name + "&" + sex + "&" + address + "&" + "リクエストは投稿データのみ受信できます";
            Content(str)を返します。
        }

これにより、フォーム内のデータが送信されます。

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

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