値が空のパラメーターはリクエストしない方法（AJAX）

度々お世話になります。
様々な方のアドバイスのおかげでようやくAJAXの仕組みがだんだんとわかってきました。
入力フォームが未入力の場合jquery.cleanQuery.jsというJSファイルを使用すれば未入力の場合リクエストパラメータから削除されるのが他のHTMLでテストした際に確認できました、ですが今回自分が作成した下記のHTMLだと未入力でもそのままリクエストパラメーターに付与されてしまうためうまくデータが返却されません。入力すればその入力に応じたデータが返却されます。
どなたかご存知の方宜しく御願いします。

javascript
1$(function(){
2$("#button").click( function(){
3$.ajax({
4	url: 'http://52.192.178.185:8280/api/rankings?',
5	type : $("#method_select").val(),
6	data: $("FORM").serialize(),
7	}).done(function (data, status, xhr) {
8		$("#response").html(JSON.stringify(data));
9	}).fail(function(xhr, status, error) {
10	// 通信失敗時の処理
11	alert("失敗");
12	}).always(function(arg1, status, arg2) {
13	//通信失敗時の処理
14	alert("完了");
15	});
16	})
17	})
18	
19/*
20 * jQuery cleanQuery 2013-03-23
21 * Authored by guimihanui
22 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
23 */
24
25(function($) {
26  function cleanQuery(query) {
27    var arr = [];
28    $.each(query.split('&'), function(i, param) {
29      if (param.split('=')[1]) { arr.push(param); }
30    });
31    return arr.join('&');
32  }
33
34  $.fn.cleanQuery = function() {
35    this.on('submit', function(event) {
36      event.preventDefault();
37      
38      var query = cleanQuery($(this).serialize());
39      location.href = this.action + '?' + query;
40    });
41    
42    return this;
43  };
44})(jQuery);

HTML
1<script>
2	$(function() {
3		$('#FORM').cleanQuery();
4	});
5	</script>
6</head>
7<title>車種ランキング</title>
8<body>
9<form id="FORM">
10<br>
11<b>ランキング種別</b><font color="RED">:必須</font><br>
12<p><input type="text" value="0" id="kind" name="kind" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
13<b>サイト種別</b><font color="RED">:必須</font><br>
14<p><input type="text" value="0" id="site" name="site" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
15<b>取得ページ位置</b>
16<p><input type="text" value="" name="page" placeholder="例:1～20" pattern="^[0-9]+$" class="keyword"></p>
17<b>リクエスト方法</b><br>
18<select id="method_select">
19<option value="POST" selected>POST</option>
20<option value="GET">GET</option>
21</select>
22<button id="button" type="button">検索結果</button></p>
23</button>
24<b><textarea id="response" cols=170 rows=19 disabled></textarea></b>
25</form>
26</body>
27</html>

追記
$("#button").click()ではなくて、$("#FORM").submit()を試作中です。
これで可能なんでしょうか・・・

またAJAXの部分にdata: $("FORM").serialize(),ではなくdata: $('#FORM').cleanQuery(),を代わりに入力したところ未入力のパラメーターが削除されました！しかし項目してもパラメーターが削除されていました。。。

行動規範の内容に同意します

回答2件

ベストアンサー

cleanQueryは機能していません。
ですので、自分で削除するかもしくはajaxを利用しないようにするしかないかと思います。
以下のようにしてできると思います。

javascript
1function cleanQuerySelf(query){
2    var arr = [];
3    $.each(query.split('&'), function(i, param) {
4        if (param.split('=')[1]) { arr.push(param); }
5    });
6    return arr.join('&');
7}
8
9$(function(){
10    $("#button").click( function(){
11        $.ajax({
12            url: 'http://52.192.178.185:8280/api/rankings?',
13            type : $("#method_select").val(),
14            data: cleanQuerySelf($("FORM").serialize()),
15        }).done(function (data, status, xhr) {
16            $("#response").html(JSON.stringify(data));
17        }).fail(function(xhr, status, error) {
18            // 通信失敗時の処理
19            alert("失敗");
20        }).always(function(arg1, status, arg2) {
21            //通信完了時の処理
22            alert("完了");
23        });
24    });
25});

cleanQueryはフォームをサブミットするときに動作します。
一方、ajaxはフォームのサブミットではないので、cleanQueryは働きません。

今回はcleanQueryと同じ動作をする関数を自前で定義して対応しています。

投稿2016/01/21 00:01

orange0190

総合スコア1698

takato

2016/01/21 00:38

ShunsukeIzui様いつもありがとうございます。事前にcleanQueryを動作させればいいのかと模索中だったときにだったのでっても助かります。無事解決いたしました。ありがとうございます！

行動規範の内容に同意します

$("#button").clickの中で、ajaxする前に、FORMの中身が空か否かチェックすれば良いのでは？

投稿2016/01/20 08:07

EKD

総合スコア161

takato

2016/01/20 08:11

EKD様コメントありがとうございます。朝からやっていますが中々うまくいかないですね＾＾； clickのすぐ下に空白のクエリを削除するJS配置ということでしょうか？ $(function() { $('#FORM').on('submit', function(e) { e.preventDefault(); var $form = $(this).clone(); $form.prop('method', $('#method_select').val()); $(this).find(':input').each(function() { var $element = $(this); if ($element.val() == '') { $form.find('*[name="' + $element.prop('name') + '"]').remove(); } }); $form.submit(); }); });

行動規範の内容に同意します

あなたの回答