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 をインストールする際に発生する問題を解決する

推薦する

HTML いくつかの特別な分割線効果

1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...

初心者のためのWebページ作成: HTMLのハイパーリンクAタグの使い方を学ぶ

ハイパーリンク a タグはリンク ポイントを表し、英語の単語「anchor」の略語です。その機能は、...

数ステップでサイバーパンク2077風の視覚効果を実現するCSS

背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...

MySQL 8.0 における MySQL のインストールと新しいパスワード認証方法の詳細な説明

1. はじめにOracle が MySQL 8.0GA をリリースしました。海外での GA はリリー...

Dockerコンテナを停止および削除できない問題の解決策

実行中のコンテナIDを見つける ドッカーps上記のコンテナの物理的な場所を見つける /var/lib...

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

Windows での MySQL 8.0.18 インストール チュートリアル (図解)

ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...

Linux での crontab スケジュール実行コマンドの詳細な説明

LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | grep ...

忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...

Nginx URL 書き換えメカニズムの原理と使用例

URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...

モバイル端末の適応に関する簡単な説明

序文フロントエンド コードの記述では、「互換性」という言葉から逃れることはできません。過去の PC ...

MySQL 5.7 インストール不要の設定グラフィックチュートリアル

Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

ファイルアップロードスタイルの詳細を実装するjs

目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...

JS 継承の詳細

目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...