使用AJAX填充HTML表

2024-04-28 • 问答

我正在使用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>

我目前正在单个获得全部输出我希望将数据放在单独的位置。

Current Output

因为只使用一行，所以您将所有数据放入同一个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>

使用AJAX填充HTML表

ewilliams 回答：使用AJAX填充HTML表

大家都在问