2016-07-13 13 views
0

Ich versuche, eine Produktsuchfunktion in meinem Node.js-Webshopprojekt hinzuzufügen. Ich verwende Express Framework mit MongoDB/Mungo. Meine Idee ist es, die Indexseite immer zu laden, wenn ein Benutzer auf das Suchsymbol klickt (HTML-Element anchern) und in meiner router.get alle Produkte aus der Datenbank erhält, die Titel mit der Benutzereingabe übereinstimmen.Eingabewert an Knotenserver in Express.js senden

Kann mir jemand sagen, wie ich diese Daten an den Server senden und von req abrufen kann?

Relevante Code von 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 }); 
    }); 
}); 

Relevante Code von 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> 

Gibt es eine Möglichkeit, dass die Eingabe der Daten zu übergeben, sagen wir, so etwas wie dies:

href ="/:search-input.val" 

Ich weiß, das ist Unsinn, aber Sie sollten bekommen, was ich anstrebe ... Jede Hilfe würde sehr geschätzt werden, da ich das stundenlang nicht lösen kann, noch die Antwort hier finde.

[EDIT] Also, habe ich ein jQuery-Handler in header.hbs, aber es tut nichts, obwohl die Chrome-Konsole sagt, dass XHR Anfrage erfolgreich war. Irgendwelche Ides?

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

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

Antwort

1

In Express können Sie GET Daten aus der req.query Eigenschaft auf Ihrem req Objekt zuzugreifen.

req.query ist ein Objekt, das die analysierten Werte einer an Ihre Route übergebenen Abfragezeichenfolge enthält (z. B. /?field1=value). Eine Abfragezeichenfolge wird mit ? bezeichnet. Mehrere Werte in einer Abfragezeichenfolge werden in der Regel durch einen &

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 }); 
    }); 
}); 

Sie benötigen eine AJAX-Aufruf wie diese

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

produzieren Dies sollte strukturieren getrennt, um eine GET /?title=foo Anfrage.

+0

Vielen Dank! Aber wie richte ich es in header.hbs ein? Einige jQuery AJAX-Methode? – dzenesiz

+1

Ja, Sie müssen jQuery/AJAX verwenden, um die tatsächliche Anforderung zu erfüllen, wenn Sie nach einem dynamischen Wert aus dem '' suchen. – peteb

+0

Ich habe versucht mit jQuery aber kein Glück ... Ich habe meine Frage bearbeitet. Wenn Sie Zeit haben und bereit sind zu helfen, wäre ich sehr dankbar. Und du hast schon viel geholfen. – dzenesiz

Verwandte Themen