21037


下記は自分が作成したHTMLです。単純に入力フォームに検索したワードを入力して検索結果を表示するといった簡単なHTMLです。細かな機能として「全角を半角にする」「空白の場合パラメーターに付与しない」といった機能があります。  
本題ですが検索結果を画面遷移せずにその場に表示するにはあとHTML側で何を用意すればいいのかわからずご質問させていただきます。

AJAXを使用するにも使い方が、間違っているのか画面遷移しない、画面遷移しないようにしてもエラーが起きてしまい結局画面遷移してしまうといった症状が起きます。

厚かましいですが、AJAXに不慣れなためもっと勉強したいです。よろしければおすすめのサイトなどありましたら教えてくださいませ。何卒宜しく御願い致します。

[code]

     $(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();
            });
        });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-01-18T10:04:05.127
21033
2016-01-18T12:37:06.883
13072
question
javascript html json ajax
作成したJSON取得機能を画面遷移せずに表示させたい


そもそもformをsubmitしてしまったら、画面遷移になってしまいます。submitすることと、Ajaxでの非同期通信は全く違うものです。つまり、formのsubmitをe.preventDefault()で抑止するところまでは良いのですが、その後自らform.submit()しちゃってるので、結局submitされて画面遷移になってます。

簡単に言うとpreventDefault()した後に、以下のようにすれば良いかと思います。

[code]

    $.ajax({
      url: ...,
      type: ...,
      data: $form.serialize(),
      success: function(result, textStatus, xhr) {
        // Do something...
      },
      error: function(xhr, textStatus, error) {
        // Do something for error...
      }
    });
    
[/code]

念のため、更にボタンの無効化、有効化を入れておけば良いかと思います。


CC BY-SA 3.0
2016-01-18T12:37:06.883
21037
2016-01-18T12:37:06.883
531
21033
answer