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

ajax

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

[スポンサーリンク]

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

$('#XXX').click(function() {
            var hostUrl= 'http://localhost/test';
            var param1 = $("#param1").val();
            var param2 = $("#param2").val();
            $.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");
                       }
              });
});

解説

サンプルプログラムは、param1とparam2のパラメータを取得して、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送信は、基本的にはGET送信を大きな違いはありません。
dataTypeへjsonpが使えないことだけは気をつけて下さい。

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