使用HTTP POST和typeahead js和bloodhound js

Question

默認情況下，bloodhound.js將通過HTTP GET進行查詢，但這會讓您容易受到JSON hijacking的影響。由於我有敏感的信息，我想加載到預先輸入，HTTP GET使我容易受到攻擊。過去有一個選擇帖子的選項（如下所示：typeahead.js remote beforesend post data issue），但這不適用於最新版本（v.0.11.1）。

Answer 1

我花了很多心痛和試驗纔得到這個。在最新版本（v.0.11.1）中有一個transport函數選項，你可以使用它來委託給你想要的任何東西（websockets，或簡單的舊版本$.ajax）。

var accountBloodhound = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 

    remote: { 
     url: '/account/search#%QUERY', 
     wildcard: '%QUERY', 
     transport: function (opts, onSuccess, onError) { 
      var url = opts.url.split("#")[0]; 
      var query = opts.url.split("#")[1]; 
      $.ajax({ 
       url: url, 
       data: "search=" + query, 
       type: "POST", 
       success: onSuccess, 
       error: onError, 
      }) 
     } 
    } 
}); 

$('#remote .typeahead').typeahead(null, { 
    name: 'best-pictures', 
    display: 'value', 
    source: accountBloodhound 
}).bind('typeahead:select', function (ev, suggestion) { 
    console.log('Selection: ' + suggestion); 
}); 

Answer 2

這Link將有助於

var searchAuto = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('word'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: base_url + 'ajax/get_words', 
     prepare: function (q, rq) { 

      $(".typeahead-loader").show(); 

      rq.data = { 
       q: $("#SearchData").val(), 
       // source: 'S01', 
       searchtype: $("#Searchtype").val(), 
       language: $("#language").val(), 
       author: $("#author").val(), 
       raag: $("#raag").val(), 
       page_from: $("#page_from").val(), 
       page_to: $("#page_to").val() 
      }; 
      return rq; 
     }, 
     transport: function (obj, onS, onE) { 

      $.ajax(obj).done(done).fail(fail).always(always); 

      function done(data, textStatus, request) { 
       // Don't forget to fire the callback for Bloodhound 
       onS(data); 
      } 

      function fail(request, textStatus, errorThrown) { 
       // Don't forget the error callback for Bloodhound 
       onE(errorThrown); 
      } 

      function always() { 
       $(".typeahead-loader").hide(); 
      } 
     } 
    } 
}); 

如果CONSOLE.LOG obj的，即，第一個參數，你會得到

，你可以很容易地覆蓋type在obj

obj.type = 'POST'

希望這有助於...