Node + Expressを使用してリロードせずにフォームを送信し、同じページにデータを戻す方法

Question

ここでは既にいくつかの既存の質問を見てきました。彼らはすべてポストリクエストを送信するためのものですが、メカニックはgetリクエストで同じでなければならないので、getリクエストのためにコードを修正しました。しかし、正しく動作していません。

何間違っている：私はフォームを送信が、ページをリロードし続けて（今それはリダイレクトの新しいページにJSONデータを

私が何をしたいのか：。フォームを送信し、リロードを防ぎます私はテンプレートのためのハンドルを使用しています、注意してください

app.get('/search', function(req, res) { 
var apiUrl = getApiUrl(req.query); 

var apiData = getApiData(apiUrl, function(statusCode, data) { 
    // console.log(data); 
    // res.render('api-guide', data); 
    res.send(data); 
    }); 
}); 

：、および

<div class="row"> 
    <div class="col-md-3"> 
    <form method="GET" action="/search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" id="term" name="term" placeholder="Find"> 
     <br> 
     <input type="text" class="form-control" id="location" name="location" placeholder="Near"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    </div> 
</div> 

<script> 
    $(function() { 
    $('form').submit(function(event) { 
     event.preventDefault(); 
     var $this = $(this); 
     $.get($this.attr('action'), function(data) { 
     $('pre').text(data); 
     }); 
    }); 
    }); 
</script> 

そして、私の急行のコードで同じHTMLページにJSONデータを表示し、私はこれを持っています。したがって、フォームは独自のテンプレートにあり、jqueryスクリプトはメインテンプレートにあります。これが期待どおりに機能しないのはなぜですか？

誰かお手伝いできますか？

Answer 1

AJAXリクエストと競合するアクションパラメータをフォーム内に設定しています。あなたは

action="/search" 

を削除し、フォームの宣言から、あなたのAJAXリクエスト

$.get('/search', function(data) { 
    $('pre').text(data); 
    }); 

に直接パスを設定した場合、あなたが期待するように、それが動作するはずです。