我使用Node.js作为服务器端,使用express和Twitter Bootstrap作为前端。该页面有一个带有表单和提交按钮的对话框;表单是通过Jquery Ajax调用提交的,不会在node.js服务器响应后重新加载页面。以下是我要做的三个步骤:
page.ejs
<input class="search" type="search" placeholder="Search ... " />
也在page.ejs正文中的Ajax内容
<table id="tblProgs" class="table table-bordered table-hover table-striped dataTable">
<thead>
<tr>
<th>
Column
</th>
</tr>
</thead>
<tbody>
<% datas.forEach(function(data) { %>
<tr>
<th width="15%">
<%- data._column %>
</th>
</tr>
<% }) %>
</tbody>
</table>
网址 $('#formId').submit(function (e){
e.preventDefault();
$.ajax({
type: 'POST',
data: JSON.stringify(data),
cache: false,
contentType: 'application/json',
datatype: "json",
url: '/route/to/nodejs',
success: function (result) {
console.log("Here are the response in json format: " + result);
}
});
});
调用此函数:
在node.js服务器中调用的函数:
/route/to/nodejs
我的问题是:如何刷新page.ejs中的表数据成功ajax回调而无需重新加载页面?
谢谢!
答案 0 :(得分:3)
您可以删除现有的tbody内容,然后在jQuery AJAX回调中使用jQuery重新渲染。像...这样的东西。
success: function (result) {
$('tbody').empty();
for (var data in result) {
$('tbody').append('<tr><th width="15%">'+result[data]._column+'</th></tr>');
}
})