web-dev-qa-db-fra.com

Comment rendre uniquement les données sans recharger toute la page dans le nœud js à l'aide du moteur de modèles ejs

Je suis nouveau sur Node JS. Ci-dessous mon code. Sur AJAX appel, les nouvelles données ne sont pas restituées. Est-ce la bonne façon de rendre les données sans charger la page entière? Existe-t-il un meilleur moyen de ne charger que des données sans utiliser AJAX? 

Fichier App.js: 

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

 });

Appel Ajax dans le fichier ejs: 

<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)" >
node.jsajaxejs
10
Anirudh

Super simple démo

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

search/index.pug 

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

search/partial.pug 

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

Cet exemple devrait vous aider, comme vous pouvez le constater, nous avons besoin de 2 itinéraires.

  1. itinéraire de base pour le rendu de la page d'index
  2. la vue partielle qui sera remplie avec les données sur le serveur, puis ajoutée au DOM dans javascript du client

Vous recommandons également de regarder hackaton-starter-kit

Résultat

 enter image description here

8
Medet Tleukabiluly

Votre stratégie est correcte!

Juste besoin de réparer quelques petites choses:

  • Les routes entre server et client doivent correspondre
  • L'API Ajax doit renvoyer les données au format json

Fichier App.js 

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

});

J'espère que ça peut aider :)

2
haotang