如何使用 ejs 模板引擎仅渲染数据而不在节点 js 中重新加载整个页面答案

【问题标题】：How to render only data without reloading entire page in node js using ejs templating engine如何使用 ejs 模板引擎仅渲染数据而不在节点 js 中重新加载整个页面
【发布时间】：2017-10-22 22:30:45
【问题描述】：

我是 Node JS 的新手。下面是我的代码。在 AJAX 调用中，不会呈现新数据。这是在不加载整个页面的情况下呈现数据的正确方法吗？有没有更好的方法来仅加载数据而不使用 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)" >

【问题讨论】：

在showResults中，添加将div的内容替换为responseText的逻辑。
这是完全错误的
@MedetTleukabiluly 我期待它。你能指引我正确的方向吗？

标签： node.js ajax ejs

【解决方案1】：

超级简单的演示

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

搜索/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

搜索/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 条路线

渲染搜索索引页面的基本路径
部分视图将在服务器上填充数据，然后在客户端 javascript 中附加到 DOM

也推荐你看看hackaton-starter-kit

结果

【讨论】：

只是想知道，这不会导致安全问题吗？如果有人改变路由请求自己的网站，他们就不能运行他们想要的任何东西吗？

【解决方案2】：

你的策略是正确的！

只需要解决一些小问题：

server 和 client 之间的路由应该匹配
Ajax API 应该以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});
    });

});

希望对你有帮助:)

【讨论】：

【解决方案3】：

要在不使用 ajax 重新加载页面的情况下呈现 EJS 部分，请查看此线程： Render EJS - Node JS

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review