ページを再読み込みせずにフォームを送信する

フォームを送信するとき、ページはリロードされるか、ユーザーが別のページに移動されます.代わりに、JQueryを使用してページを再読み込みせずにフォームを送信する方法を学びましょう!

フォームの例
次の3つのフィールドがあります.

ファーストネーム

ラストネーム

メールアドレス

HTMLです.それはいくつかを使用しているBootstrap マークアップいくつかのスタイリングを追加します.

<div class="container">
  <form class="mt-4">
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" class="form-control" id="firstName" name="firstName">
    </div>
    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" class="form-control" id="lastName" name="lastName">
    </div>  
     <div class="form-group">
      <label for="emailAddress">Email Address</label>
      <input type="text" class="form-control" id="emailAddress" name="emailAddress">
    </div>     
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

フォームアクション
典型的なフォームにはアクション属性があります.action属性はフォームの送信時にフォームデータを送信する場所を定義します.ところで、action属性が定義されていない場合は、フォームが現在あるページに移動します.

<form method="GET" action="http://example.com">

フォームの送信後、フォームメソッドが取得されているか、メソッドが定義されていない場合は、フォームのデータが実際に名前/値のペアの形式でURLの引数として追加されることがわかります.それぞれはアンパサンドで区切られています.フォームメソッドがPOSTの場合、フォームデータはURLに追加されません.

http://example.com?firstName=John&lastName=Smith&[email protected]

フォームの提出の別のURLに移動し、フォームのデータをURLに追加されたユーザーを移動する代わりに、ページの再読み込みなしでフォームを送信する方法を学びましょう!

jQueryのインストール
インストールする方法がいろいろありますjQuery .

Download ファイルとプロジェクトフォルダに配置します

使用するCDN

npmのインストール

ヤフーを追加する

ほとんどの場合、おそらくJQueryを使用する他のJavaScriptの直前にあなたのページの一番下に含まれています.

<script src="path/to/jquery"></script>

準備ができましたか.
jQueryは本当にウェブページで物事を操作するのが得意です.Webページは、各ページがWebページの一部を表すオブジェクトであるツリー構造として考えます.
ドキュメントオブジェクトモデル( DOM )と呼ばれます.DOMメソッドはツリーへのプログラムアクセスを提供します.これはjQueryが持っているもので、Webページを操作するメソッド(関数)を提供します.
Webページで何かを操作する前に、ページが実際にDOMをロードしたことを確認しなければなりません.jQueryを提供するready それをするだけの機能.

$(document).ready(function() {
  // Do stuff here now that the DOM is ready.
});

上記の構文はまだ動作しますが、推奨されません.推奨される方法は以下の通りです.

$(function() {
  // Do stuff here now that the DOM is ready.
});

フォームを選択
JQueryのセレクタメソッドを使ってDOM内のフォームを見つけましょう.

$('form')

jQueryはあなたが求めたものを見つけるためにDOMを通して移動します.この場合、フォーム要素を探しています.あなたが同じページ上に複数のフォームを持っていれば、それはそれらすべてを選択することに留意してください!
より具体的にするには、フォーム要素に一意のID属性を追加できます.

<form id="contactForm">

ジェネリックフォーム要素を探す代わりに、contactフォームの一意のIDを探すことができます.

$('#contactForm')

イベントハンドラ
フォームを選択したので、Submitイベントを聞く必要があります.jQueryを使用します.on 関数.以下の例では、最初の引数はlistenするイベントの型です.2番目の引数はコールバック関数です.

$(function() {
  $('form').on('submit', function(event) {

  });
});

上記のコールバック関数は匿名関数と見なされます.私は名前付き関数の作成を好む.OnSubmitという名前の関数を作成します.

$(function() {
  $('form').on('submit', onSubmit);
});

では、onsubmit関数を作成しましょう.

function onSubmit(event) {

}

フォームが送信されると、JQueryはSubmitイベントを引数として関数に渡します.フォームを送信するイベントは、ページが再ロードされる原因となります.イベント関数preventDefault できる!

function onSubmit(event) {

  // Prevent the default form submission event from happening.
  event.preventDefault();

}

フォームが送信されると、もはやページをリロードされません!ここからフォームデータをどうするかを決めることができます!
たとえば、JQueryを使用してフォーム内のすべてのデータを収集することができますserializeArray 関数.これは、フォームフィールドの名前属性に基づいて名前/値のペアの配列を作成します.

var data = $(this).serializeArray();

注意このキーワードを使用しました.上記のシナリオでは、フォームを表します.我々はJQueryセレクタでそれをラップします.
作業をチェックするCodePen example !
当社のウェブサイトをご覧くださいhttps://nightwolf.dev そして、我々に続いてくださいFacebook そして!