［jQuery/Ajax］POSTでフォームの情報を送信し、jsonのデータを受け取る。

今まではGETを使っていたのだが、
セキュリティの観点からPOSTにしたいと言うことで
フォームの値をPOSTで渡し、jsonの形式でデータを受け取れるようにした。

今まではgetJSONを使っていた。

$.getJSON(
    "/URL",
    {"key":"value"},
    function(data){
        ...
    }
);

引数1はアクセスするURL、引数2は渡すキー、引数3はcallbackしたときに呼び出される関数、
dataは受け取ったjsonのデータ。

POST/Ajax

$.ajax ({
    type: 'POST',
    url: '/URL',
    cache: false,
    data: {'key':'フォームに入力されたvalue'},
    success: function(data, dataType){
        this;
        data = $.parseJSON(data);
        ...
    },
    error: function (XMLHttpRequest, textStatus, errorThrown){
        this;
    }
});

これで、data:{}をPOSTでサーバに渡すことができた。

data = $.parseJSON(data);

は、json形式の文字列を、JavaScriptオブジェクトに変換している。

ちなみにasync:falseを追加することで通信中にブラウザをロックすることができ、
ProcessData:falseでデータを文字列に自動変換することをさけることができる。

必要に応じて使うと良いと思う。

参考にしたページ
jQuery.ajax(options) - jQuery 日本語リファレンス

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

10日でおぼえる jQuery入門教室

jQueryデザインブック　仕事で絶対に使うプロのテクニック

jQueryクックブック

jQuery ポケットリファレンス (POCKET REFERENCE)