如何在express.js中显示来自ajax的解析数据

Question

我使用 node.js + express 制作了这个页面，其中显示了下表：

当使用下拉列表更改限制时（带有标签显示结果的选项），我希望使用 ajax 仅重新加载包含新数据的表，但这样做时遇到了麻烦。 这是显示我的表格的 ejs 代码：

 <table class="assignment-table table table-striped table-bordered table-hover table-condensed table-responsive">
                        <thead>
                            <tr>
                                <th>S.No.</th>
                                <th>Name</th>
                                <th>Subject</th>
                                <th>Topic</th>
                                <th>Faculty</th>
                                <th>Posted</th>
                                <th>Last Date</th>
                                <th>Mode of Submission</th>
                            </tr>
                        </thead>
                        <tbody class="table_body">

                            <% for(var i =0;i< result.length;i++) { %>

                            <tr>
                                <td class="result_id">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link" id="">
                                            <%= result[i]._id %>
                                        </a>
                                </td>

                                <td class="result_name">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                             <%=  result[i].nameAssignment %> 
                                        </a>
                                </td>
                                <td class="result_subject">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                            <%= result[i].Subject %>
                                    </a>
                                </td>
                                <td class="result_topic">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                           <%= result[i].Topic %>
                                        </a>
                                </td>
                                <td class="result_faculty">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                        <%= result[i].Faculty %></a>
                                </td>
                                <td class="result_posted">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                        <%= result[i].Posted %></a>
                                </td>
                                <td class="result_lastdate">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                        <%= result[i].LastDate %></a>
                                </td>
                                <td class="result_submission">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                        <%= result[i].Submission %></a>
                                </td>
                            </tr>
                            <% } %>
                        </tbody>
                    </table>

在上面提到的 filter_result() 路由中，我从 url 中获取限制并使用新限制查询数据库并再次呈现页面。

   Router.get('/filter_result',(req,res) => {
    limit = parseInt( decodeURIComponent(req.query.limit) );
    models.filterResults(limit, (count,result) =>  {
        //if (err) throw err;
        console.log(limit);
        //res.send(result);
        res.render('assignment-list',{limit:limit,result:result,count : count});
    }); 
});

如何在 ejs 页面中重新显示表格？

Answer 1

基本上，您的.ejs 格式仅在您加载或重新加载页面时呈现一次。因此，您要做的就是在已经渲染的 HTML 之上重新渲染（或替换）来自 AJAX 调用的 HTML。

您似乎已经在使用 jQuery，所以我的示例代码也使用了 jQuery。

重新渲染（或再次替换）HTML 取决于您的 /filter_result 响应的内容。如果只是一堆<tr>s 那么它可能是

JS

$('table.assignment-table').find('tbody').html(result);

如果是整个<table>，那么你最好用<div> 之类的包装器包装<table>，然后执行以下操作。

HTML

<div id="table-wrapper">
    <table>
        ...
    </table>
</div>

JS

$('div#table-wrapper').html(result);

您引用包装器和替换内容的方式可能会有所不同。

更新 1

假设您的 API (/filter_result) 返回一个赋值对象数组，例如

{
  "status": "success",
  "data": [
    {
      "Subject": "Your subject",
      "Topic": "Your topic",
      ...
    },
    ...

  ]
}

您可以从数据中创建一堆<tr/>s，并用它们替换现有的<tr/>s（当然是使用jQuery。关于使用jQuery创建DOM，您可以参考the docs。）

$.ajax({
  method: 'GET',
  url: 'URL_TO_FILTER_RESULT',
  data: SOME_DATA,
  success: function(res) {
    var assignments = res.data;
    var body = [];

    assignments.forEach(function(assignment) {
      var tr = $('<tr/>');
      tr.append($('<td/>').html('<a href="blah-blah">' + assignment.Subject + '</a>');
      tr.append($('<td/>').html('<a href="blah-blah">' + assignment.Topic + '</a>');

      ...

      body.push(tr);
    });

    $('table.assignment-table').find('tbody').html(body);
  }
})