Wie nur zum Rendern von Daten ohne nachladen eine ganze Seite in node js mit ejs-Template-engine

Ich bin neu in Node JS. Unten ist mein code. Auf AJAX-Aufruf neue Daten nicht gerendert wird. Ist das der richtige Weg ist, zum darstellen von Daten ohne das laden der gesamten Seite? Gibt es einen besseren Weg, um zu laden, nur Daten ohne Verwendung von AJAX.

App.js Datei:

   app.get('/users', function(req, res) {

         var query = req.query.search;

         User.find({'name' : new RegExp(query, 'i')}, function(err, users){
         var data = {list:users};
         console.log("Searching for "+data);

         res.render('admin/users',{data:data});
    });

 });

Ajax-Aufruf in ejs Datei:

<script>
function showResult(str) {

    var xmlHttp = null;
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "/admin/users?search="+str, true );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}
</script>

<input type="text" id="search" name="search" placeholder="Search" class="form-control col-md-7 col-xs-12" onkeyup="showResult(this.value)" >
  • In showResults fügen Sie die Logik zu ersetzen, die den Inhalt der erforderlichen div mit der responseText.
  • Das ist völlig falsch
  • Ich hatte das erwartet. Könnten Sie mich in die richtige Richtung?
InformationsquelleAutor Anirudh | 2017-05-23



2 Replies
  1. 8

    Super einfache demo

    routes.js

    app.get('/search', searchController.index);
    app.get('/search_partial', searchController.partial);

    searchController.js

    const data = [{ text: 'apple' }, { text: 'potato' }, { text: 'sugar' }];
    
    exports.index = (req, res) => {
      res.render('search/index');
    };
    
    exports.partial = (req, res) => {
      const query = req.query.search;
      //emulate mongoose query
      const result = data.filter(item => new RegExp(query, 'i').test(item.text));
      res.render('search/partial', { result });
    };

    Suche/index.Mops

    extends ../layout
    
    block content
      .page-header
        h3 Search
    
      form.form-horizontal(onsubmit="searchPartial(this);return false;")
        .form-group
          label(class='col-sm-2 control-label', for='search') Text
          .col-sm-8
            input.form-control(type='text', name='search', id='search', autofocus=true)
        .form-group
          .col-sm-offset-2.col-sm-8
            button.btn.btn-primary(type='submit')
              i.fa.fa-search
              | Find
      #search-result

    Suche/teilweise.Mops

    .row
      each item in result
        .col-sm-3
          h2=item.text

    client-side.js

    /* eslint-disable */
    $(document).ready(function() {
    
      //Place JavaScript code here...
      function searchPartial(form) {
        var formData = $(form).serializeArray();
        $.get('/search_partial', {
          search: formData[0].value
        }).then(function (data) {
          $('#search-result').html(data);
        });
      }
    
      window.searchPartial = searchPartial;
    });

    In diesem Beispiel sollte Ihnen helfen, wie Sie sehen können, müssen wir 2 Routen

    1. grundlegende route für die Darstellung von search-index-Seite
    2. die partielle Ansicht, die mit Daten gefüllt werden, die auf server, und klicken Sie dann angehängt DOM in javascript-client

    Empfehlen Ihnen auch, zu schauen, hackaton-starter-kit

    Ergebnis

    Wie nur zum Rendern von Daten ohne nachladen eine ganze Seite in node js mit ejs-Template-engine

  2. 2

    Ihre Strategie ist richtig!!!!

    Gerade brauchen, um fix einige kleine Dinge:

    • Strecken zwischen server und client sollten übereinstimmen
    • Ajax-API sollte die Rückgabe von Daten in json format

    App.js Datei

    app.get('/admin/users', function(req, res) {
    
             var query = req.query.search;
    
             User.find({'name' : new RegExp(query, 'i')}, function(err, users){
             var data = {list:users};
             console.log("Searching for "+data);
    
             res.json({data:data});
        });
    
    });

    Hoffnung, dass es helfen kann 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.