如何在ajax调用expressjs后使用jquery呈现部分ejs模板

时间:2013-09-21 01:48:39

标签: javascript jquery express ejs

我无法在jquery ajax调用之后找到如何在ejs上创建DOM的一部分。该功能是实时搜索,效果很好,它将请求发送到服务器,它搜索数据库并返回包含基于搜索的用户列表的变量。问题从那里开始,因为EJS不再允许部分,并且在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 });
};

请求返回更新的人员变量,我需要生成联系人列表的html。我尝试了很多方法,但无法实现它。页面最初呈现的方式是这样的,所以我不知道如何根据更新的人员变量刷新列表。

HTML就像这样:

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

1 个答案:

答案 0 :(得分:1)

尝试在另一个模板中处理每个AJAX更新的成功结果以呈现:(以js为单位)

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

如果person是从您的AJAX响应返回的数组对象,请处理不同的模板文件:(在模板中)

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