0

いつもお世話になります。今回画面遷移せずにJSON形式のデータを表示するHTMLを作成しました。

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

$(function(){
$("#button").click( function(){
$.ajax({
	url: 'http://52.192.178.185:8280/api/rankings?',
	type : $("#method_select").val(),
	data: $("FORM").serialize(),
	}).done(function (data, status, xhr) {
		$("#response").html(JSON.stringify(data));
	}).fail(function(xhr, status, error) {
	// 通信失敗時の処理
	alert("失敗");
	}).always(function(arg1, status, arg2) {
	//通信失敗時の処理
	alert("完了");
	});
	})
	})
	
/*
 * jQuery cleanQuery 2013-03-23
 * Authored by guimihanui
 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
 */

(function($) {
  function cleanQuery(query) {
    var arr = [];
    $.each(query.split('&'), function(i, param) {
      if (param.split('=')[1]) { arr.push(param); }
    });
    return arr.join('&');
  }

  $.fn.cleanQuery = function() {
    this.on('submit', function(event) {
      event.preventDefault();
      
      var query = cleanQuery($(this).serialize());
      location.href = this.action + '?' + query;
    });
    
    return this;
  };
})(jQuery);
<script>
	$(function() {
		$('#FORM').cleanQuery();
	});
	</script>
</head>
<title>車種ランキング</title>
<body>
<form id="FORM">
<br>
<b>ランキング種別</b><font color="RED">:必須</font><br>
<p><input type="text" value="0" id="kind" name="kind" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
<b>サイト種別</b><font color="RED">:必須</font><br>
<p><input type="text" value="0" id="site" name="site" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
<b>取得ページ位置</b>
<p><input type="text" value="" name="page" placeholder="例:1~20" pattern="^[0-9]+$" class="keyword"></p>
<b>リクエスト方法</b><br>
<select id="method_select">
<option value="POST" selected>POST</option>
<option value="GET">GET</option>
</select>
<button id="button" type="button">検索結果</button></p>
</button>
<b><textarea id="response" cols=170 rows=19 disabled></textarea></b>
</form>
</body>
</html>

3 件の回答 3

0

jquery.cleanQuery.js を利用するのはあきらめました。
ボタンクリック時に、クエリ文字列から値なしのものを除去しています。

$(function(){
    $("#button").click( function(){
        var query = $("FORM").serialize();
        var arr = [];
        $.each(query.split('&'), function(i, param) {
            if (param.split('=')[1]) { arr.push(param); }
        });
        var cleaned_query = arr.join('&');
        $.ajax({
            url: 'http://52.192.178.185:8280/api/rankings?',
            type : $("#method_select").val(),
            data: cleaned_query,
3
  • 出来ました! cleanQueryが他にも悪さをしていたのですがalg様の書いたコードだとすべて改善されました。 ご親切にどうもありがとうございます。 Commented 2016年1月20日 10:32
  • 解決したようで、何よりです。 ところで、teratailでも同様の質問を見かけたのですが、こちらもたかぽん様のご質問でしょうか? teratail.com/questions/25118 違っていたら、ごめんなさい。 そうだとしたら、マルチポストと呼ばれる行為でマナー違反とみなされることが多いので、ご注意くださいね。 やむを得ずマルチポストする場合は、マルチポストである旨とマルチポスト先のURLを明記する等の配慮をしていただくとみんなが幸せになれるかと思います。 参考:Wikipedia(ja.wikipedia.org/wiki/…
    – alg
    Commented 2016年1月21日 0:47
  • alg様 とても感謝しております! 私です。他サイトでもマナー違反になるんですね。 知らなかったとはいえ他の方にご迷惑をおかけしてしまいましたね。2度としないようにいたします。 リンク先までありがとうございました。 Commented 2016年1月21日 3:14
0

問題はボタンのクリックに応じて、AJAXで送信しようとしていることです。
けれど、その未入力のパラメーターを削除するファンクションはFormがsubmitされた際には動きます。

$("#button").click()ではなくて、$("#FORM").submit()を利用したらどうでしょうか?

それに、そのcleanQuery()はGETだけで動きそうだと思います。クエリストリングを利用しているようなのです。

3
  • Ryuu様 今早速試しています。 GETでなくPOSTでは送ることは出来ないということでしょうか? Commented 2016年1月20日 6:15
  • そのようだと思います。会社に着いてから、自分でもちゃんと試してみます。結果を待っています
    – Ryuu
    Commented 2016年1月20日 7:46
  • Ryuu様 自分ことなのに親身になっていただいて嬉しいです。 今のところうまくいっていませんが感謝しています。 ありがとうございます。 Commented 2016年1月20日 7:50
0
<script>
    $(function() {
        $('#FORM').cleanQuery();
    });
</script>

これを消して、

$.ajax({
    url: 'http://52.192.178.185:8280/api/rankings?',
    type : $("#method_select").val(),
    data: $("FORM").serialize(),

data部分を

    data: $('#FORM').cleanQuery(),

としたらどうでしょうか?

4
  • function cleanQuery(query) と違い、 $(...).cleanQuery() で呼び出される $.fn.cleanQuery が返すのはthis(=jQueryオブジェクト)なのでそのようには使えないかと。。
    – unarist
    Commented 2016年1月20日 8:49
  • alg様 物は試しと実践しました。 確かに未入力のパラメーターが削除されリクエストすることは出来ました! しかし入力してもパラメーターが削除されていました… 入力した項目がリクエストパラメーターとして付与されれば完成となるのですが、、、ものすごく惜しいです。。。 unarist様 いつもありがとうございます。 Commented 2016年1月20日 8:55
  • unarist様、ご指摘ありがとうございます。動作確認せず思い付きで投稿してしまいました。たかぽん様もぬかよろこびさせてすみません。
    – alg
    Commented 2016年1月20日 8:59
  • alg様 力になってくれようとした気持ちだけで大変うれしかったです! 朝からずっとわからない状態が続いているのでw Commented 2016年1月20日 9:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。