如何使用mongoosastic + AJAX进行即时search?
我已经成功地configuration了mongoosastic,我试着search,它工作正常,但是当涉及到前端我不确定如何实现这一点,我尝试了很多方法,但不能拿出一个好的解决办法
这是代码。
// 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); }); });
所以每当我search与“工程师”有关的东西时,我都会得到一个json数据
所以后端工作完美。
但是,当涉及到jQuery和Ajax我不断收到不好的要求
逻辑:每当插入东西,然后张贴,并find该结果。
这里是前端的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
?
你需要做的是
- 在每个关键笔划上,获取input值
- 通过Ajax发送给你的后端
- 使用成功的JSON(这里我们只是在div中显示“title:salary”)
所以你的前端代码看起来像这样:
$('#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); } }); });
我现在正在处理与此类似的事情。 首先,它看起来像你最初的ajax请求中缺less参数,所以你的节点服务器没有得到任何信息:
$('#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); } }); });
在debugging这些问题时,如果您有权访问节点服务器中的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); }); });
日志将非常清楚地报告未定义或正确的string,这样你就可以看到你的参数是否正确
你也可能想检查你的节点服务器地址和端口(只是一个完整性检查)。 对于我的阿贾克斯请求,我必须把
url: "http://localhost:9200/api/search"
在我的查询之前,只是因为我的服务器在不同的端口上
以下是关于jQuery post函数的更多信息供您参考:
http://api.jquery.com/jquery.post/
希望这可以帮助!
- Ajax /套接字:javascript数组对象的属性丢失
- 如何select一个表行数据,并将其发送到编辑模式使用jQuery,JavaScript和AJAX更新数据?
- 我是否需要使用Ajax来不被视为机器人?
- 共享桌面和基于Web的Javascript REST / Ajax
- 通过Ajax请求发送后无法parsingJSON
- Node.js – 尝试运行server.js时出错
- 如何在不知道请求数量的情况下链接Javascript Ajax请求。 (的NodeJS)
- AJAX调用运行C代码的最佳做法?
- forbiddenError / 403 Ajax Express Csurf – 如何正确使用Csurf?