如何使用Ajax,Json和Node.js刷新表数据

时间:2015-06-24 11:54:23

标签: javascript ajax node.js express ejs

我使用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回调而无需重新加载页面?

谢谢!

1 个答案:

答案 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>');
    }
})