5

mongoosastic を正常に構成しました。検索してみましたが、正常に動作していますが、フロントエンドに関しては、これを達成する方法がよくわかりません。多くの方法を試しましたが、思いつきませんでした良い解決策。

これがコードです。

// For the Search API
    router.post('/api/search/', function(req, res, next) {
      Job.search(
        {
          query_string:
          { query: req.body.search }
        } , function(err, results) {
            if (err) return next(err);
            res.json(results);
        });
    });

したがって、「エンジニア」に関連するものを検索するたびに、json データが取得されます

ここに画像の説明を入力

したがって、バックエンドは完全に機能します。

ただし、jquery と ajax に関しては、私は悪いリクエストを受け続けます

ロジック: 何かが挿入されるたびに投稿し、その結果を見つけます。

これがフロントエンドのjqueryコードです。

  $('#search').keyup(function() {

    var search_term = $(this).val();


    $.ajax({
      type: "POST",
      url: "/api/search",
      success: function(){
        $('search_results').html(search_term);
      },
      error: function(data){
        alert('Error', data);
      }
    });

  });

HTML

<input type="text" class="form-control input-lg" id="search" name="search" placeholder="Search for part-time..." />



 <div id="search_results">


    </div>

json の結果を に挿入するにはどうすればよいsearch_resultsですか?

4

2 に答える 2

4

あなたがする必要があるのは

  1. キーストロークごとに、入力値を取得します
  2. Ajax経由でバックエンドに送信します
  3. 成功時に返される JSON を使用します (ここでは、「タイトル: 給与」を div に表示するだけです)。

したがって、フロントエンド コードは次のようになります。

$('#search').keyup(function() {

  // 1. grab the search term from the input field
  var search_term = $(this).val();

  // 2. send it to your back-end via ajax in the body 
  $.ajax({
    method: "POST",
    url: "/api/search",            // <-- your back-end endpoint
    data: "search=" + search_term  // <-- what you're sending
    dataType: "json",              // <-- what you're expecting back
    success: function(json){       // <-- do something with the JSON you get
      // 3. parse the JSON and display the results
      var res = json.hits.hits.map(function(hit) {
          return hit._source.title + ": " + hit._source.salary;
      });
      $('search_results').html(res.join("<br />"));
    },
    error: function(data){
      alert('Error', data);
    }
  });
});
于 2015-11-27T18:14:32.083 に答える
1

私は現在、これに非常によく似たものに取り組んでいます。まず、最初の ajax リクエストでパラメーターが欠落しているように見えるため、ノード サーバーは情報を取得していません。

$('#search').keyup(function() {
//Perform the ajax request
var search_term = $(this).val();
$.ajax({
  type: "POST",
  url: "/api/search",
  data: {"search": search_term},
  success: function(data) {
     //Loop over all the data and output it, appending data to element
     //with a line break
     for(var i=0; i < data.hits.length; i++)
    $('search_results').append(data.hits[i]._source.title+'<br />');
  },
  error: function(data){
    alert('Error', data);
  }
});

});

これらの問題をデバッグするとき、実際に取得しているデータを確認するためにノード サーバーにアクセスできる場合は、ノード サーバーで console.log() を使用すると非常に役立ちました。

// For the Search API
router.post('/api/search/', function(req, res, next) {
  console.log("%j", req.body.search)
  Job.search(
    {
      query_string:
      { query: req.body.search }
    } , function(err, results) {
        if (err) return next(err);
        res.json(results);
    });
});

ログは、未定義または予想される正しい文字列を非常に明確に報告するため、パラメーターが正しいかどうかを確認できます

ノードサーバーのアドレスとポートを確認することもできます（サニティチェックとして）。私のajaxリクエストのために、私は入れなければなりません

url: "http://localhost:9200/api/search"

サーバーが別のポートにあるという理由だけで、クエリの前に

参考までに、jQuery post 関数の詳細を次に示します。

http://api.jquery.com/jquery.post/

お役に立てれば！

于 2015-12-04T05:06:19.900 に答える