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

Question

我使用 node.js 制作了此页面 + 表示我在其中显示以下内容 table ：

我希望在使用下拉菜单更改限制时使用 ajax 仅使用新数据重新加载 table（带有标签显示结果），但这样做时遇到了问题。这是显示我的 table 的 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 页面中重新显示 table？

Answer 1

基本上，当您加载或重新加载页面时，您的 .ejs 格式只会呈现一次。因此，您要做的是在已呈现的 HTML.

之上重新呈现（或替换）您的 AJAX 调用中的 HTML

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

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

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) returns 一个赋值对象数组，例如

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

  ]
}

你可以从数据中创建一堆 <tr/>s 并用它们替换现有的 <tr/>s（当然是 jQuery。关于用 [ 创建 DOM =54=],可以参考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);
  }
})

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

How to display parsed data from ajax in express.js

javascript

ajax

jquery

ejs

node.js

JS

HTML

JS

更新 1