ajaxを使ったWebフォームの送信方法
jQueryガイド、そしてAJAXに関するjQueryチュートリアルのパート5をすでにお読みかもしれませんが、今日はAJAXを使ってウェブフォームを動的に送信する方法を紹介します。jQueryはAJAXを使うのに圧倒的に簡単なので、初心者の方は入門チュートリアルをチェックしてみてください。さっそく、飛び込んでみましょう。
ajaxを使用する理由
AJAXは、ほとんどのウェブページに実装されており、その人気は高まっています。
AJAXの大きな利点は、ウェブページの一部を部分的に読み込むことができることです。これにより、ページの表示が高速化され、レスポンスも良くなり、ページ全体ではなく、一部のデータのみを再読み込みすることで帯域を節約することができます。以下は、AJAXの基本的な使用例です。
- 新しいメールが届いていないか、定期的にチェックする。
- サッカーのライブスコアは30秒ごとに更新されます。
- ネットオークションの価格を更新する。
AJAXは開発者に、ウェブページを高速化し、応答性を高め、素早く作るためのほぼ無限の能力を提供します - あなたの訪問者があなたに感謝するような。
html
始める前に、HTMLフォームが必要です。HTMLとは何かわからないという方は、初心者向けのホームページ作成方法をご覧ください。
必要なHTMLはこちらです。
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript"></script></head><body><form action="some/file" method="POST" name="myForm" id="myForm">Name:<input type="text" name="name">Age:<input type="text" name="age"><input type="submit"></form> </body></html>このhtmlでは、いくつかの要素を持つフォームを定義しています。actionとmethodの属性があることに注意してください。フォームが送信される場所と方法を定義します。AJAXを使用する場合は必要ありませんが、JavaScriptを無効にしてもサイト訪問者が使用できるようにするため、使用することをお勧めします。このページには、GoogleがCDNでホストしているjQueryが含まれています。ヘッダーにはscriptタグが含まれており、ここにコードが書かれています。
このフォームが少し退屈に見えるかもしれませんので、CSSを学んで少し活気づけることを検討してみてください。
ジャバスクリプト
JavaScriptでフォームを送信する方法はいくつかありますが、まず一番簡単なのはsubmitメソッドです。
document.getElementById('myForm').submit();もちろん、必要であれば jQuery を使ってフォームをターゲットにすることもできます。
$('#myForm').submit();このコマンドは、送信ボタンを押すのと同じように、ブラウザにフォームを送信するように指示します。これはAJAXではないので、ページ全体を再読み込みします - これは必ずしも満足のいくものではありません。
フォームのmethod属性は、フォームをどのように送信するかを指定します。このプロパティは、POST または GET のいずれかを指定する。AJAX を用いてフォームを送信する場合、このプロパティは使用されないが、同じメソッドを使用することは可能である。
現代のWebの機能の多くは、GETまたはPOSTリクエストによって実現されています。一般に、GETはデータの取得に、POSTはデータの送信（および応答の返送）に使用されます。データはGETで送ることもできますが、特にフォームデータの場合はPOSTの方が良い場合がほとんどです。GETリクエストを見たことがあるかもしれませんが、これはURLにデータを付加して送信するものです。
somewebsite.com/index.html?name=Joeクエスチョンマークは、その直後にあるデータはサイトを巡回するために使用するのではなく、ページが処理するために渡すべきものであることをブラウザに伝えるものです。これはページ番号のような単純なものには有効ですが、デメリットもあります。
最大文字数制限：urlで送信できる最大文字数。大量のデータを送信しようとすると、データが足りなくなる場合があります。
可視性：GETリクエストで送信されたデータは誰でも見ることができます。これは、パスワードやフォームデータなどの機密データには不向きです。
POSTリクエストは、URL内のデータを送信しないことを除けば、同様の方法で動作します。つまり、より多くのデータを送ることができ（このデータをペイロードと呼ぶ）、データを公開しないことで、ある程度のセキュリティを確保することができる。それでも、データは簡単にアクセスできてしまうので、完全に安心したい場合は、SSL証明書をチェックしてみてください。
POSTでもGETでも、データはkey-> valueのペアで送信されます。上記のURLでは、キーはname、値はJoeである。
フォームを送信するためのより良い方法は、非同期JavaScriptとXML（AJAX）を使用することです。 JavaScriptはAJAXの呼び出しをサポートしていますが、使い方が分かりにくいことがあります。 JQueryはこれらを全く同じ方法で実装していますが、使いやすい方法で実装しています。GETまたはPOSTリクエストを実行するようにブラウザに指示することができます。この場合はPOSTを使用しますが、GETリクエストも同様の方法で実行されます。
構文は以下の通りです。
$.post('some/url', $('#myForm').serialize());このコードは2つのことを行っています。最初の部分（$）は、このタスクを実行するためにjQueryを使用したいことをブラウザに知らせます。2番目の部分は、jQueryからpostメソッドを呼び出しています。2つのパラメータを渡す必要があります。1つ目はデータを送信するURLで、2つ目はデータです。ブラウザの同一生成元セキュリティポリシーによって、（アクセスしようとしているURLによっては）ここで妨害される可能性があります。これを回避するためにcross-origin resource sharingを有効にすることができますが、ページと同じドメインにあるURLを指すようにすれば十分です。
第2引数は、フォームのjQueryシリアライズメソッドを呼び出します。このメソッドは、フォーム内のすべてのデータにアクセスし、転送の準備、つまりシリアライズを行います。
このコードだけでフォームを送信することは可能ですが、少し違和感を感じるかもしれません。ブラウザの開発ツールを利用すると、Web リクエストのデバッグが容易になるため、調べる価値はあると思います。
さらに、PostmanはHTTPリクエストをテストするための優れたフリーツールです。
もし、送信ボタンを押したときにAJAXを使ってフォームを送信したいのであれば、同様に簡単な方法です。フォームのsubmitイベントにコードを添付する必要があります。コードは以下の通りです。
$(document).on('submit','#myForm',function(){ $.post('some/url', $('#myForm').serialize()); return false;});このコードはいくつかのことを行っています。フォームを送信した後、ブラウザはまずコードを実行します。そして、このコードはAJAXを使ってフォームデータを送信します。最後に必要なのは、オリジナルのフォームが送信されないようにすることです。これはAJAXですでにやったことなので、再び同じことが起こらないようにするためです
AJAXが完了した後に他のタスク（あるいはステータスメッセージを返す）を実行したい場合は、コールバックを使用する必要があります。JQueryはこれらのツールを非常に簡単に使うことができます。
$.post('url', $('#myForm').serialize(), function(result) { c***ole.log(result);}resultパラメータには、データ送信先のurlから返されたデータが含まれる。このデータに対して、以下の方法で簡単に応答することができる。
if(result == 'success') { // do some task}else { // do some other task}この記事はこれで終わりです。HTTPリクエストと、フォームのコンテキストでAJAXがどのように動作するかについて、深く理解していただけたと思います。
フォームにAJAXを使用する方法について、何か新しいトリックを学びましたか？ 下のコメント欄でご意見をお聞かせください。
画像引用元：vectorfusionart/Shutterstock
- 2021-03-14 16:09 に公開
- 閲覧 ( 21 )
- 分類：プログラミング
