时间戳

首页 > 解决方案 > 使用 AJAX 填充 HTML 表

node.js - 使用 AJAX 填充 HTML 表

问题描述

我正在使用 express api 从 mongodb 获取详细信息并在前端使用 AJAX 调用它，我能够获取详细信息但无法在表格中显示它。

我尝试将其附加到表格中。我已经附上了我所做的一些代码。

AJAX 部分

$.ajax({
            type: 'GET',
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: "http://localhost:8000/employees",
            success:function(data){
                data.forEach(element => {
                   $("#Name").append("<td>"+element.Name+"</td>");
                   $("#EmployeeId").append("<td>"+element.EmpId+"</td>");
                   $("#Designation").append("<td>"+element.Designation+"</td>");
                   $("#Email").append("<td>"+element.Email+"</td>");
                });
            },
            error:function( errorMessage)
            {
                console.log(errorMessage);
            }
        });

HTML 部分

<table>
     <th>Name</th><th>EmployeeId</th><th>Designation</th><th>Email</th>
     <tr>
         <td id="Name"></td>
         <td id="EmployeeId"></td>
         <td id="Designation"></td>
         <td id="Email"></td>
     </tr>
</table>

我目前正在单个获得整个输出，我希望将数据分开。

电流输出

标签： node.jsajaxmongodbexpress

解决方案

您将所有数据放入同一td行，因为您只使用一行。

您的代码运行方式基本上是......

<td id="Name">
     <td>{value1}</td><td>{value2}</td>
</td>
....

您需要tr在回调中创建行，而不仅仅是将数据附加到列td

你可以做些什么来解决这个问题，在success回调中构建整行..

$.ajax({
    type: 'GET',
    data: {},
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: "http://localhost:8000/employees",
    success:function(data){
        data.forEach(element => {
            var row = document.createElement("tr");
            var name = document.createElement('td');
            var employeeID = document.createElement('td');
            var designation = document.createElement('td');
            var email = document.createElement('td');

            name.innerHTML = element.Name;
            employeeID.innerHTML = element.EmpID;
            designation.innerHTML = element.Designation;
            email.innerHTML = element.Email;

            row.appendChild(name);
            row.appendChild(employeeID);
            row.appendChild(designation);
            row.appendChild(email);

            $('#table').append(row);
        });
    },
    error:function( errorMessage)
    {
        console.log(errorMessage);
    }
});

在您的 HTML 中，只需将 ID 应用于table您想要的任何内容。

编辑:: 另外，从语法上讲，您也应该将表头放在一行中，所以，

<tr>
    <th>Name</th>
    <th>Employee ID</th>
    ...
</tr>

推荐阅读