jQuery.ajaxメソッドのdataオプションに設定する変数がundefinedの場合の動作について

jQuery.ajaxメソッドのdataオプションに設定する変数がundefinedの場合の動作について

Posted at August 2,2012 3:33 AM
Tag:[JavaScript, JSON]

jQueryのajaxメソッドでdataオプションに設定する変数がundefinedの場合の動作について調べてみました。

動作というのは、POSTデータ・GETデータのことです。

1.dataオプションにJSON(または連想配列)を利用した場合

jQueryのajaxメソッドでdataに設定する変数の値にJSONや連想配列(ハッシュ)などを利用すれば、undefinedの変数についてはPOSTデータやGETデータとして渡されません。

サンプルソース

<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    $('#send').click(function(){
        var param = {
            "foo": $('#foo').val(),
            "bar": $('#bar').val(), // undefined
        };
        $.ajax({
            url: 'http://localhost/index.cgi',
            type: "POST",
            data: param,
            success: function() {},
            error: function() {}
        });
    });
});
</script>
<input type="text" id="foo" value="" />
<input type="button" id="send" value="send" />

JSONや連想配列(ハッシュ)などを利用すれば、POSTデータには「foo=xxx(フォームに入力した値)」だけが設定され、undefinedの変数barは除外されます。

実行結果
実行結果

サンプルはPOSTメソッドで行いましたが、GETメソッドでも同じ結果になりました。

2.dataオプションにFormData()を利用した場合のPOSTデータ

サンプルソース

<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    $('#send').click(function(){
        var param = new FormData();
        param.append("foo", $('#foo').val());
        param.append("bar", $('#bar').val()); // undefined
        $.ajax({
            url: 'http://localhost/index.cgi',
            type: "POST",
            data: param,
            processData: false,
            success: function() {},
            error: function() {}
        });
    });
});
</script>
<input type="text" id="foo" value="" />
<input type="button" id="send" value="send" />

FormData()を利用すると、POSTデータにはundefinedの変数barも設定されました。これは空のフォームデータを送信したときと同じように見えるようです。

実行結果
実行結果

3.調査のきっかけ

当初、FormData()を利用してjQuery.ajaxメソッドのdataオプションに設定していたのですが、値がundefinedの変数についてPOSTデータとして送信したくない必要が生じたため、調べ始めたのがきっかけです。

サンプルソースでは、変数barの値「jQuery('#bar').val()」に対応するinput要素はコード上に現れないため、意味不明に思われるかもしれませんが、やりたいことは項目の表示・非表示が動的に行えるフォームデータで、非表示にした項目を送信データの対象外にしたいというものです。

4.関連サイト

JavaScriptのundefinedについては以下のページに詳しく書かれています。

連載:Ajax時代のJavaScriptプログラミング再入門 - 第4回 JavaScriptでオブジェクト指向プログラミング
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)