この記事では、フォームデータの非同期送信を実装するための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 ヘッダーを追加します。 コントローラーメソッドは次のとおりです。 Request.Form(送信方法はpost) パブリックアクション結果 getDataRequest() { 文字列名 = Request.Form["名前"]; 文字列 性別 = Request.Form["性別"]; 文字列アドレス = Request.Form["アドレス"]; string str = name + "&" + sex + "&" + address + "&" + "リクエストは投稿データのみ受信できます"; Content(str)を返します。 } これにより、フォーム内のデータが送信されます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VirtualBox を使用して Mac 上にローカル仮想マシン環境を構築する方法
>>: Windows 環境に mysql-8.0.11-winx64 をインストールする際に発生する問題を解決する
1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...
ハイパーリンク a タグはリンク ポイントを表し、英語の単語「anchor」の略語です。その機能は、...
背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...
1. はじめにOracle が MySQL 8.0GA をリリースしました。海外での GA はリリー...
実行中のコンテナIDを見つける ドッカーps上記のコンテナの物理的な場所を見つける /var/lib...
まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...
ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...
LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | grep ...
MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...
URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...
序文フロントエンド コードの記述では、「互換性」という言葉から逃れることはできません。過去の PC ...
Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...
一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...
目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...
目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...