Node.js 如何使用ejs模板引擎仅呈现数据而不重新加载节点js中的整个页面

我是NodeJS的新手。下面是我的代码。在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});
    });

 });

<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)" >

ejs文件中的Ajax调用：

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

 });

<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)" >

函数显示结果（str）{
var xmlHttp=null；
xmlHttp=新的XMLHttpRequest（）；
open（“GET”、“/admin/users？search=“+str，true”）；
xmlHttp.send（空）；
返回xmlHttp.responseText；
}

超级简单的演示

routes.js

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

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

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

searchController.js

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

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

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

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

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

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

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

客户端.js

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

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

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

这个示例应该可以帮助您，正如您所看到的，我们需要两条路线

呈现搜索索引页的基本路径

将在服务器上填充数据，然后在客户端javascript中将其附加到DOM的部分视图

也推荐你去看看

结果

---

你的策略是正确的

只需要解决一些小问题：

• 服务器

  和

  客户端

  之间的路由应匹配
• 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});
    });

});

---

希望它能有所帮助：）

在

showResults

中，添加逻辑，用

responseText

替换所需的

div

的内容。这完全是错误的wrong@MedetTleukabiluly我正期待着呢。你能告诉我正确的方向吗？只是想知道，这不会导致安全问题吗？如果有人改变路线请求他们自己的网站，他们不能运行他们想要的任何东西吗？