【jQuery + Ajax】AjaxでPOST送信する方法

ajax

AjaxでPOSTメソッドで通信する方法を紹介します。
また、POSTメソッドを使って通信する場合の注意点についても紹介していきます。

[スポンサーリンク]

AjaxでPOST送信するサンプルプログラム

jQuery1.6以上の場合はこちらのソースを使ってください。

$( function() {
    $( '#ajax-button' ) .click(
    function() {
        var hostUrl= 'http://localhost:8080/api/v1/tickets/';
        var param1 = 100;
        var param2 = 200;
        $.ajax({
            url: hostUrl,
            type:'POST',
            dataType: 'json',
            data : {parameter1 : param1, parameter2 : param2 },
            timeout:10000,
        }).done(function(data) {
                          alert("ok");
        }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
                         alert("error");
        })
    });
} );

jQuery1.5以前の場合はこちらのソースを使ってください。

$( function() {
    $( '#ajax-button' ) .click(
    function() {
        var hostUrl= 'http://localhost:8080/api/v1/tickets/';
        var param1 = 100;
        var param2 = 200;
        $.ajax({
            url: hostUrl,
            type:'POST',
            dataType: 'json',
            data : {parameter1 : param1, parameter2 : param2 },
            timeout:10000,
            success: function(data) {
                          alert("ok");
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                         alert("error");
                   }
          });
    });
} );

解説

サンプルプログラムは、parameter1とparameter2のパラメータをセットして、POST送信するプログラムです。

レスポンスデータをJson形式ということを想定して、dataTypeへjsonを指定しています。
もしもレスポンスデータが別の形式であれば、変更することも可能です。

POSTメソッドで気をつけること

GETメソッドを指定して通信する時は、dataType: 'jsonp'を使っていました。
しかし、POSTメソッドを指定して通信する時は、jsonpを使うことが出来ません。

jsonpを使うと、GETメソッドとして通信してしまいます。
POSTメソッドを使用する時は、必ずdataType: 'json'を使用するようにしましょう。

$.postと$.ajaxの違い

AjaxでPOSTメソッド送信するのに、$.post関数を使用することも出来ます。
$.postと$.ajaxの違いは、$.postは$.ajaxと比較すると、パラメータを省略することが出来るといったメリットがあります。

$.postは内部的に$.ajaxを使用しているので、結局は同じ動きとなります。
内部の動作については、$.postと$.ajaxで違いはありません。
$.postを使うメリットはあまりないように思いますね。色々なコードを見てみてきましたが、ほとんど皆さん$.ajaxを使っているように思います。

サンプルソース

AjaxでPOSTするサンプルプロジェクトをコチラのGitHubで公開しています。

POST先のサーバーサイドの処理もJavaで作っています。つまり、POST送信した後でサーバサイド側で値が渡っているか確認するこができます。

動かし方はSpring Bootを使っていますのでJavaに詳しい人ならすぐ動かすことができますので、動かし方が分からないという方は詳しそうな人に聞いてみて下さい。それか私あてにTwitterでつぶやいてもらえればできる範囲で動かし方をお伝えします。

さいごに

AjaxのPOST送信は、基本的にはGET送信と大きな違いはありません。
dataTypeへjsonpが使えないことだけは気をつけて下さい。

Ajax側ではPOSTもGETも大きな違いはありませんが、API側(JavaやPHP側)では、GETメソッド・POSTメソッドによりプログラミングを変える必要はあります。
もしも開発途中にAjaxが上手く動かない!という場面に遭遇したら、API側も調べてみることをオススメします。

最近ではAngularJS や React.jsのようなフレームワークが主流となってきつつあるので、jQueryだでけAjaxを実装する機会というのは少なくなってきているかもしれません。それでもコードの書き方は似ているので基本はしっかりとおさえておきましょう。
それでは!