いつもお世話になります。今回画面遷移せずに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>