如何在不刷新html页面的情况下在表格上显示数据（使用nodejs和mysql ajax）

Posted 2023-02-24

【中文标题】如何在不刷新html页面的情况下在表格上显示数据（使用nodejs和mysql ajax）

【英文标题】：How to Display data on a table without refreshing html page (using nodejs & mysql ajax)

【发布时间】：2017-02-10 05:05:04

【问题描述】：

我正在尝试使用 nodejs & express 将 mysql 表中的数据列出到我的 html 页面。

我正在使用 nodejs & express 并希望使用 ajax 调用将数据从 mysql 表列出到 html 页表，以便在添加新项目时不会刷新页面。目前，我使用 express 语法直接显示结果，并且与数据表完美配合。

mysql中我的表tablename-metrics_list数据是这样的-

标识 |指标 |自定义指标

1  | abcd    | abcd

2  | abcd    | abcd

3  | abcd    | abcd

我的Server端js代码如下-

router.get('/', function(req, res) 
    try 
        sess = req.session;
        if (sess.user != req.session.id) 
            console.log('SESSION EXPRED');
            res.redirect('/');
         else 
            console.log('******LISTING FOR PORTAL');
            connection.query('SELECT * FROM metrics', function(err, data) 
                if (err) 
                    console.log("## Error in Portal ##");

                 else 
                    console.log("DATA " + JSON.stringify(data));
                    res.render('metrics-list', 
                        metricsList: data
                    );
                
            );
        
     catch (ex) 
        console.log("Exception : " + ex);
    
); 

我的HTML表格代码是：

 <table cellpadding="0" cellspacing="0" border="0"   class="table table-striped table-bordered dataTable no-footer" id="basic-datatable" role="grid" aria-describedby="basic-datatable_info">
                            <thead>
                                <tr role="row">
                                    <th class="sorting_asc" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 40px;">Sr No</th>
                                    <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 80px;">Group</th> 
                                    <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 80px;">Actions</th>                                                                      
                                </tr>
                            </thead>
                            <tbody>
                                <%for(var j=0;j<metricsList.length;j++)%>
                                    <% if(metricsList[j].custom_metrics == '' || metricsList[j].custom_metrics == null)  %>

                                    <%  else  %>
                                    <tr class="gradeA odd" role="row">
                                            <td class="sorting_1"><%=j+1%></td>

                                            <td ><%=metricsList[j].custom_metrics %></td> 

                                            <td style="text-align: center;"> <a href="/metrics/delete?id=<%=metricsList[j].id%>" onclick="return confirm('Are you sure you want to delete this item?');">
                                                        <i class="glyphicon glyphicon-trash" ></i></a> </td>                                   
                                    </tr>                                      
                                    <%  %>  

                                <%%>
                            </tbody>
                        </table>
                <!-- TABLE END -->

我想弄清楚如何使用ajax列出表格，以便在mysql中添加数据时，它立即显示在列表中，而不会刷新整个html页面。

【问题讨论】：

使用ajax ***.com/a/4038587/2277289

你的意思是像websockets ？从您的问题陈述来看，它看起来更像是一个套接字连接而不是 ajax。如果您使用 ajax，您将使用长轮询，这是一件昂贵的事情:)

【参考方案1】：

您可以删除现有的 tbody 内容，然后在 jQuery AJAX 回调中使用 jQuery 重新渲染。有点像..

success: function (result)      
    $('tbody').empty();
    for (var data in result) 
       $('tbody').append('<tr class="gradeA odd" role="row"><td style="word-break: break-all;">data.custom_metrics</td></tr>');
    
)