Ajaxで値を複数送信する方法

ajax

AjaxでAPI(サーバサイド)へ複数個の値を送信する方法を紹介します。
AjaxでAPI(サーバサイド)へ値を渡す方法は、以前「AjaxでAPIにJSON形式の値を送信する方法」「Ajaxで文字列配列を送信する方法」を紹介しました。
今回は、複数個の値をAPI(サーバサイド)へ渡す方法を紹介します。
実際の開発では、1つの値を渡す場面よりも複数個の値を渡す場面の方が多いと思います。

[スポンサーリンク]

Ajaxで値を複数送信するコード


<script type="text/javascript">

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

解説

data内のパラメータをカンマ(,)で区切ることで、値を複数個送信しています。
上記の例だと、サーバサイド側へは、「test1」と「test2」の2つの値を送信していることになります。

data内部の値をダブルクォート(””)やシングルクォート('')で囲う必要はありません。
ただし、key:value のvalue部分が文字列の場合は、シングルクォート('')で囲いましょう。
上記の例であれば、「test1 : 'aaa'」value部分の「aaa」のみをシングルクォート('')で囲っています。

さいごに

値の形式が配列やJSONであっても、dataで値を複数個指定することは可能です。
冒頭でも書きましたが、実際の開発では、API(サーバサイド)へ複数の値を送信することの方が多いです。
値を複数送信する方法自体は難しいことではないので、しっかりおさえておきましょう。

それでは!