Отправить входное значение узловому серверу в Express.js

Question

Я пытаюсь добавить функциональность поиска продукта в мой проект веб-магазина Node.js. Я использую Express framework с MongoDB/mongoose. Моя идея - загружать индексную страницу всякий раз, когда пользователь нажимает значок поиска (элемент привязки HTML), а в моем router.get получает все продукты из базы данных, которые заголовки соответствуют пользовательскому вводу.

Может кто-нибудь сказать мне, как отправить эти данные на сервер и получить его от req?

Соответствующий код из index.js:

router.get('/', function(req, res, next) { 
    Product.find({ title: new RegExp(req.data) }, function(err, docs){ 
     var chunks = []; //rows in HTML page 
     var chunkSize = 3; //No. of elemens in each row 

     for (var i = 0; i < docs.length; i += chunkSize) { 
      chunks.push(docs.slice(i, i + chunkSize)); 
     } 

     res.render('shop/index', { title: 'Shopping Cart', products : chunks }); 
    }); 
}); 

Соответствующий код из header.hbs:

<ul class="nav navbar-nav navbar-right"> 
     <li> 
      <form class="navbar-form navbar-left" role="search" id="search-input"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <a href="/" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></a> 
      </form> 
     </li> 

Есть ли способ, чтобы передать данные, что входные, скажем, что-то вроде это:

href ="/:search-input.val" 

Я знаю, что это бессмыслица, но вы должны получить то, на что я нацеливаюсь ... Любая помощь была бы очень оценена, поскольку я не могу решить это часами и не найду ответ здесь.

[EDIT] Итак, я добавил обработчик JQuery в header.hbs, но он ничего не делает, даже если Chrome консоль говорит, что запрос XHR успешно. Любые иды?

$('#search-btn').click(function() { 
     var title = $('#search-input').val(); 

     $.ajax({ 
      type : 'GET', 
      url: '?title=' + title, 
      data : title 
     }); 
     }); 

Answer 1

В экспресс, вы можете получить доступ к данным GET из req.query собственности на вашем req объекта.

req.query - это объект, содержащий анализируемые значения строки запроса, переданной в ваш маршрут (то есть /?field1=value). Строка запроса обозначается ?. Несколько значений в строке запроса, как правило, отделены друг от друга &

router.get('/', function(req, res, next) { 
    var titles = req.query.titles 

    Product.find({ title: new RegExp(titles) }, function(err, docs){ 
     var chunks = []; //rows in HTML page 
     var chunkSize = 3; //No. of elemens in each row 

     for (var i = 0; i < docs.length; i += chunkSize) { 
      chunks.push(docs.slice(i, i + chunkSize)); 
     } 

     res.render('shop/index', { title: 'Shopping Cart', products : chunks }); 
    }); 
}); 

Вы должны структурировать ваш вызов AJAX, как этот

$.ajax({ 
    type : 'GET', 
    url: '/' 
    data : { 
    title: title  
    } 
}); 

Это должно произвести GET /?title=foo запрос.