TopJavaScriptJSON > 2012年8月
2012年8月 2日

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

August 2,2012 3:33 AM
Tag:[, ]
Permalink

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でオブジェクト指向プログラミング
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3