【jQuery入門】post()でデータを送信・取得する方法！

こんにちは、ライターのマサトです！

今回は、サーバーとデータの送受信ができるpost()メソッドについて学習を進めていきましょう！この記事では、

などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、「post()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！

「post()」とは？

それでは、まず最初にpost()メソッドについて基本的な知識から学んでいきましょう！

「post()」は、ブラウザ側から任意のデータをサーバへ送信してその結果を取得することができるメソッドになります。一般的には、フォーム要素にユーザーが入力した情報をサーバーへ送信するようなケースが多いでしょう。

例えば、サーバー側で受け取ったデータを処理してJSONに変換してまたブラウザ側で受け取るようなことも簡単に実現できます。

本記事では、post()メソッドの基本的な使い方からフォームを使った活用例まで詳しく解説しますので、ぜひ参考にしてみてください！

post()の使い方

ここからは、実際に「post()」メソッドを使ったプログラミング手法を学んでいきましょう！post()の基本的な書き方からデータを送信する方法や、サーバーからデータを取得する方法まで具体的に見ていきます。

post()の書き方

まず最初に、post()メソッドの基本的な書き方から学んでいきましょう！post()メソッドを使う時に必要になるのは、送信先であるサーバーへのURLと任意のデータになります。一般的な記述としては次のようになります！

$.post( サーバーへのパス, 任意のデータ )

post()メソッドの第1引数に「送信先のURL」となるサーバーへのパスを記述します。第2引数にはサーバーへ送信する「任意のデータ」を設定します。この「任意のデータ」というのは、例えばフォームの場合であればユーザーが入力した文字列データになるわけです。

また、送信したあとにサーバーからの返信を受け取るためのメソッドも次のように用意されています！

$.post( サーバーへのパス, 任意のデータ )

//サーバーからの返信を受け取る
.done( function(data) {  } )

//通信エラーの場合
.fail( function() {  } )

//通信が終了した場合
always ( function() {  } )

done()は、正常に通信が行われたあとにサーバーからの返信を受け取る処理を記述します。fail()は、通信に異常があった場合に実行される処理を記述します。always()は、通信異常に関係なく必ず実行される処理を記述します。

これらのメソッドを有効利用することで、jQueryからサーバーとの送受信ができるようになるのです！

post()でデータを送信する方法

それでは、実際にpost()メソッドを使ってみましょう！一般的には自分が管理するサーバーへデータを送信するわけですが、ここではテスト用のサーバーへ文字列を送信してみます。次のサンプル例を見てください！

$.post( 'https://httpbin.org/post', 'name=太郎' )

テストサーバーとして「httpbin.org」を使い、文字列「name=太郎」というデータを送信しています。「name=太郎」という記述方法は、フォーム要素のデータを送信する時に利用する書き方なので詳しくは後述します。

まずは、post()メソッドによる送信方法がどのような記述になるのか慣れておくようにしておきましょう！

post()でJSONを取得する方法

次に、データを送信したあとに[]bサーバーからの返信を受け取る方法を見ていきましょう！冒頭でも少し解説しましたが、サーバーからの返信を受け取るには「done()」メソッドが必要になります。次のサンプル例を見てください！

$.post( 'https://httpbin.org/post', 'name=太郎' )

.done(function( data ) {

    console.log( data.form );

})

実行結果

{name: "太郎"}

「done()」メソッド内に関数を設定し、コンソールログに受け取ったデータを表示するようにしています。テストサーバーに送信したデータは、そのままオブジェクト形式で返信されているのが実行結果からも分かりますね。

また、送信するデータを「&」で連結させて

【 name=太郎&age=32&tel=080-1234-5678 】

のように複数指定することも可能です。実行結果は以下のようなオブジェクトになります。

{age: "32", name: "太郎", tel: "080-1234-5678"}

このように、post()を使うと「ブラウザ」と「サーバー」の間でデータの送受信ができるようになるわけです！

Formによる送信方法

ここからは、実践的な活用事例としてForm要素を使ったpost()メソッドの使い方について学習をしていきます！フォームの設定からデータの送受信を行う方法まで、具体的なサンプル例と一緒に理解を深めていきましょう。

データ送信用のFormの作り方

サーバーへ送信するためにフォームの「データ形式」についておさらいをしておきましょう！基本的な形式は次のようになります。

【 パラメータ名=文字列データ&パラメータ名=文字列データ・・・ 】

ここで言う「パラメータ名」というのは、inputタグのname属性値のことになります。「文字列データ」はユーザーが入力した文字列のことで、複数のinputタグがある場合は「&」で連結していくことになります。例えば、次のようなフォームがあるとします。

<form>
    <input type="text" name="sample" value="hello">
    <input type="text" name="sample" value="world">
</form>

inputタグのname属性値が「sample」となっており、value値にはあらかじめ文字列が設定されています。つまり、先ほどのデータ形式に当てはめると次のようになります。

【 sample=hello&sample=world 】

パラメータ名が「sample」で、文字列データが「hello」という組み合わせになるわけです！そこで、jQueryの標準で提供されている「serialize()」メソッドを使うと送信用のデータ形式に変換してくれます。

$('form').serialize()

実行結果

sample=hello&sample=world

「Form要素」に対して「serialize()」メソッドを実行するだけで、実行結果のような形式に自動変換されているのが分かりますね。Form要素からデータをサーバーに送信する時は「serialize()」で形式を変換してpost()メソッドで送信するという流れを覚えておきましょう！

Formのデータを利用したpost()の書き方

それでは、post()を使ってFormのデータをサーバーへ送信するためのプログラミング手法を見ていきましょう！まず最初に簡単な「Form要素」を次のように作ります。

<form>
    <input type="text" name="sample">
    <input type="text" name="sample">
    <input type="text" name="sample">

    <input type="submit" value="送信">
</form>

この例では、3つのinput要素と送信用のsubmitボタンを配置しています。そして、jQuery側でフォームのデータを取得してサーバーへ送信するには次のように記述します。

$.post( 'https://httpbin.org/post', $('form').serialize() )
    
.done(function( data ) {

    console.log( data.form );

})

post()を使ってデータの送信先となるサーバーのURLを記述し、第2引数へ「serialize()」を使ったフォームのデータを設定します。あとは、サーバーからの返信を受け取るために「done()」の記述を追加すればOKです。

ただし、このままだとHTMLが読み込まれた瞬間にpost()が実行されてしまうので、送信ボタンをクリックしたら処理が実行されるようにしましょう！

post()を送信（submit）する方法

さて、最後に送信ボタンをクリックしてからpost()メソッドを実行させるようにします！そこで、jQueryで用意されている「submit()」メソッドを利用すると簡単です。次のサンプル例を見てください！

$('form').submit(function( event ) {
    event.preventDefault();

    //post()の処理をここに記述する

})

「Form要素」に対してsubmit()を実行することで、送信ボタンがクリックされたあとに処理を行えるようになります。ポイントは、preventDefault()を記述している点です！

これはsubmitが実行されると、画面が必ず更新されるというブラウザの仕様をキャンセルするための記述になります。画面が更新されると、コンソールログに表示した文字列も消えてしまうので今回は記述しています。

そのため、submitボタンをクリックして画面遷移させるようなケースでは記述する必要はないので注意しておきましょう！

post()とAjax()の違いについて

jQueryにはpost()に似たメソッドとしてAjax()があるので、両者の違いについて少し解説をしておきます！

実を言うと、「post()」メソッドの中身は「Ajax()」で記述されているのです。そのため、どちらも同じ「Ajax()」メソッドであると考えることも可能です。

しかしながら、「Ajax()」メソッドは幅広い通信に対応するために非常に多くのオプションが用意されており扱いが難しいのです。そのため、一般的によく使うサーバーとの送受信においては、post()のように機能が特化しているシンプルなメソッドが便利なわけです。

どちらのメソッドでも同じことを実現できるのですが、用途に応じて扱いやすいメソッドを使うと効率の良いコードになるのでオススメです！

まとめ

今回は、サーバーとデータの送受信ができる「post()」メソッドについて学習をしました！最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！