AjaxでAPIにJSON形式の値を送信する方法

Ajaxで引数をAPI側(サーバサイド側)に渡す場面も多いと思います。
渡すパラメータが単純な「key=value」形式であれば、URLの後ろに「key&value」とURLパラメータ形式でつけておけば問題ありません。
特にJSON等の複雑な形式であれば、単純なURLパラメータではなく、ajaxのdataを使うことによって、どんなパラメータを送信しているのかが一目でわかり、ソースの可読性があがります。

AjaxでJSON形式の値を送信するコード

<script type="text/javascript">
$( function() {
    $( '#ajax-button' ) .click(
    function() {
        $.ajax({
          url: 'http://localhost:8080/app/family',
          type:'GET',
          data: {test : '{"key":"val"}'},
          dataType: 'jsonp',
          success: function(data) {
                       alert("ok");
                   },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
                      alert("ng");
                 }
        });
    });
} );
</script>

解説

「data: {test : '{"key":"val"}'}」でAPI(サーバサイド側)にJSONを渡しています。
URLパラメータでみると、「test」がkeyに該当します。
「{"key":"val"}」がvalueに該当します。

API側(サーバサイド側)では、URLパラメータ(HTTPリクエスト)の「test」を取得して、
「{"key":"val"}」のJSONをパースして使用します。

さいごに

値をAPI(サーバサイド側)に送るAjaxでは、dataを使った方が可読性が高くなります。
URLの後ろに「key=val&key=val・・・」としていても動作は変わりませんが、見にくいプログラムになります。

可読性以外にも、配列[1,2]を送信することも出来ます。(URLパラメータでは配列渡しが出来ません。)
APIへのパラメータは、「data:」を使って渡すようにしましょう！
それでは！

Tweet

Pocket