如何仅使用ejs模板引擎呈现数据而无需在节点js中重新加载整个页面

我是新的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)" > 

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

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 

客户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. 呈现search索引页面的基本路线
2. 部分视图将填充服务器上的数据，然后附加到客户端JavaScript中的DOM

也build议你看看hackaton-starter-kit

结果

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

希望它可以帮助:)