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

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

この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

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

まず、HTML コードを見てみましょう。

<div class="コンテナ">
       <form class="form-horizo​​ntal" 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jquery.form.js 非同期フォーム送信の詳細な説明
  • Extjs フォーム入力ボックス非同期検証プラグイン実装方法
  • 純粋なJavaScript Ajaxを使用してPHPで非同期フォーム送信を実装する簡単な例
  • JavaScriptは非同期検証フォームを同期フォームに書き換えます
  • Javascript非同期フォーム送信、画像アップロード、非同期シミュレーションAjaxテクノロジーと互換性あり
  • JavaScriptはフォームデータの非同期取得を実装します

<<:  VirtualBox を使用して Mac 上にローカル仮想マシン環境を構築する方法

>>:  Windows 環境に mysql-8.0.11-winx64 をインストールする際に発生する問題を解決する

推薦する

Xampp サーバーで MySQL パスワードを変更する方法 (画像付き)

今日、PHP で作業しているときに、Xampp サーバーに付属の mysql データベースを使用する...

Vueはダイアログのカプセル化を実装します

目次Vue2 ライティングVue3プラグインのバージョンの記述Vue3 動的コンポーネントの記述書き...

Linux ssh サーバーの構成コード例

LinuxホストにSSHサーバーをインストールするには、次のターミナルコマンドを使用します: sud...

Webデザインチュートリアル(2):模倣と盗作について

<br />前回の記事では、Webデザインの手順と方法を紹介しました。詳細については、前...

CocosCreator クラシック エントリー プロジェクト flappybird

目次開発環境ゲームエンジンのコンセプトCocos Creatorについてプロジェクト構造コード編集環...

DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作

目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....

editplus の Zen コーディング例コードの説明

たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...

HTML スタイル タグと関連する CSS リファレンスの詳細な説明

HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...

JavaScriptエラーキャプチャの詳細な説明

目次1. 基本的な使い方とロジック2. 特徴3. エラーオブジェクト4. キャッチアンドスロー戦略の...

CentOS7環境でDockerを使ってPHP動作環境を構築する手順を詳しく解説

関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...

この記事では、CSSの2列レイアウトと3列レイアウトの具体的な使い方をまとめます。

序文大規模なフロントエンドの開発に伴い、UI フレームワークが次々と登場し、フロントエンド開発におけ...

MySQL 5.7.27 のダウンロード、インストール、設定に関する詳細なチュートリアル

目次1. ダウンロード手順2. 環境変数を設定する3. my.iniファイルを設定する4. MySQ...

MySQL 5.7.16 ZIP パッケージのインストールと設定のチュートリアル

この記事では、MySQL 5.7.16 ZIPパッケージのインストールと設定のチュートリアルを参考ま...