
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:」を使って渡すようにしましょう!
それでは!
この記事はお役に立てましたか?
お役に立てたことがあればシェアしていただけると嬉しいです!