作成したJSON取得機能を画面遷移せずに表示させたい
下記は自分が作成したHTMLです。単純に入力フォームに検索したワードを入力して検索結果を表示するといった簡単なHTMLです。細かな機能として「全角を半角にする」「空白の場合パラメーターに付与しない」といった機能があります。
本題ですが検索結果を画面遷移せずにその場に表示するにはあとHTML側で何を用意すればいいのかわからずご質問させていただきます。
AJAXを使用するにも使い方が、間違っているのか画面遷移しない、画面遷移しないようにしてもエラーが起きてしまい結局画面遷移してしまうといった症状が起きます。
厚かましいですが、AJAXに不慣れなためもっと勉強したいです。よろしければおすすめのサイトなどありましたら教えてくださいませ。何卒宜しく御願い致します。
$(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();
});
});
<form action="http://52.192.178.185:8280/api/rankings" id="FORM" Accept-charset="UTF-8">
<br>
<b>ランキング種別</b><font color="RED">:必須</font><br>
<p>【車種別:0】【メーカー別:1】【ボディタイプ別:2】【メーカー別:3】【国産車別:4】【輸入車別:5】</p>
<p><input type="text" value="0" name="kind" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
<b>サイト種別</b><font color="RED">:必須</font><br>
<p><input type="text" value="0" 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>
<p><input type="text"value="" name="size" placeholder="例:0~20" pattern="^[0-9]+$" class="keyword"></p>
<b>メーカーCD</b>
<p><input type="text" value="" name="maker_cd" placeholder="例:101" pattern="^[0-9A-Za-z]+$" class="keyword"></p>
<b>ボディタイプCD</b>
<p><input type="text" value="" name="body_cd" placeholder="例:10" pattern="^[0-9A-Za-z]+$" class="keyword"></p>
<b>集計開始年月日</b>
<p><input type="text" name="start_date" placeholder="例:yyyymmdd形式"pattern="^[0-9]+$" class="keyword" ></p>
<b>集計終了日</b>
<p><input type="text" name="end_date"placeholder="例:yyyymmdd形式"pattern="^[0-9]+$" class="keyword"></p>
<b>リクエスト方法</b><br>
<select id="method_select">
<option value="GET" selected>GET</option>
<option value="POST">POST</option>
</select>
<button type="submit" class="btn btn-default btn-sm dropdown-toggle">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>