如何在ExpressJS上使用jQuery在ajax调用后呈现ejs模板的一部分

Question

我很难找到如何在jquery ajax调用后在ejs上创建DOM部分的方法。该功能是一个实时搜索，它可以正常工作并将请求发送到服务器，搜索数据库并返回基于搜索的用户列表变量。问题从那里开始，因为EJS不再允许使用partials，而在html上嵌入javascript的方法不能在jquery上工作，或者至少我不知道如何做。我的思路卡住了，非常感谢您的任何帮助。

这是Ajax调用：

$.ajax({
    url: 'http://localhost:3000/contactsearch',
    type: 'post',
    dataType: 'text',
    data: { searchquery: searchquery}
})
.done(function(res){
  var persons = res;
})

页面是通过Express这种方式进行渲染的：

exports.search = function(req, res){
res.render('./contacts/search', { title: 'Contact search', persons: persons });
};

请求返回一个更新后的 persons 变量，我需要生成联系人列表的 HTML。我尝试了许多方法，但仍然无法实现。页面最初呈现的方式如此，因此我不知道如何根据更新后的 persons 变量仅刷新列表。

HTML 如下：

 <% if (persons.length) { %>
    <% persons.forEach(function(person) { %>
    <div class='contactlistusername'><%= person.username %></div>
    <% })}%>

- anges244

---

“persons” 是一个数组对象吗？ - ram

Answer 1

尝试将每个 AJAX 更新成功的结果处理成不同的模板进行呈现：（在 js 中）

var renderedData = new EJS({url:'/template/rendering.template'}).render({data:persons});
$('.contact').html(renderedData);

如果persons是从您的AJAX响应返回的数组对象，请在不同的模板文件中进行处理：（在模板中）

<% if (persons.length) { %>
<% for(var i in persons) { %>
<div class='contactlistusername'><%= persons[i].username %></div>
<% }} %>

- ram

---

Persons是一个数组对象，嵌入的js在初始加载时运行良好。问题在于当jQuery进行ajax调用并获取更新后的persons数组对象时，如何触发仅加载您编写的代码。如果我将您编写的内容放在ajax成功回调中，仍然没有任何反应... - anges244