web-dev-qa-db-ja.com

ejsテンプレートエンジンを使用してノードjsでページ全体をリロードせずにデータのみをレンダリングする方法

私はNode JSに不慣れです。以下は私のコードです。OnAJAX call新しいデータはレンダリングされていません。これはデータをレンダリングせずにレンダリングする正しい方法ですか？ページ全体をロードしますか？AJAXを使用せずにデータのみをロードするより良い方法はありますか？.

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

 });

ejsファイルでのAjax呼び出し：

<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
9
Anirudh

超シンプルなデモ

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

ご覧のとおり、このサンプルは2つのルートが必要です。

  1. 検索インデックスページをレンダリングするための基本的なルート
  2. サーバー上のデータが入力され、クライアントjavascriptのDOMに追加される部分ビュー

また、 hackaton-starter-kit を確認することをお勧めします

結果

enter image description here

8
Medet Tleukabiluly

あなたの戦略は正しいです！

いくつかの小さな問題を修正する必要があります。

  • serverとclientの間のルートは一致する必要があります
  • AjaxAPIはjson形式でデータを返す必要があります

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

});

それが役立つことを願っています:)

2
haotang