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

我有这个页面使用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之上重新渲染（或replace）来自AJAX调用的HTML。

看来你已经在使用jQuery，所以我的示例代码也使用了jQuery。

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

JS

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

如果是整个<table>那么你最好用<table> wrap <table>这样的包装器来包装<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", ... }, ... ] } 

你可以从数据中创build一堆<tr/> s，并用它们replace现有的<tr/> s（当然是使用jQuery。关于使用jQuery创buildDOM，你可以参考文档） 。

 $.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); } })