如何将ajax结果放到html表中？答案

【问题标题】：How to put ajax result to html table?如何将ajax结果放到html表中？
【发布时间】：2019-08-30 11:35:54
【问题描述】：

我能够使用 ajax 从 MVC 控制器获取结果，它返回我的 json 数据。现在我需要把它放到视图中的 html 表中，我该怎么做？

function getClassificators(){
  $.ajax({
    url:"/Employee/GetClassificationLevels",
    type:"GET",
    success: function(result){
      if(Array.isArray(result) && result.length > 0){
        var eachRes = result.map(function(classificator, i){
          return {
            levels: classificator.Level,
            name: classificator.Name,
            score: classificator.Score, 
            sublevel_info : classificator.EmpEvaluation_SubLevelView.map(function(sublevelinfo, i){
              return {sublevel_name: sublevelinfo.Name};
            })
          };
        });
      }
    },
    error: function(err){
      console.log(err);
    }
  });
}

控制台显示：

[{
   {levels:0, name: "level4", score:3, sublevel_info:{sublevel_name:"sublevel4"}}
}]

预期的输出是 html 表格。

【问题讨论】：

哪张桌子？当你的代码使用 jQuery 时，你为什么要一个 javascript 答案？
如何附加它以便我得到 html 表？
我有答案，但在纯 JS 中，而不是在 jQuery 中
可以分享一下吗？

标签： javascript jquery ajax asp.net-mvc asp.net-ajax

【解决方案1】：

看看 DataTables.js。它具有开箱即用的 ajax 支持，并且非常易于使用。这里是一个例子

var dtTickets = $("#dtTickets");

        datatable = $(dtTickets).DataTable(
            {
                "order": [[0, "desc"]],
                "createdRow": function (row, data, index) {
                    $(row).data("userId", @id);
                    $(row).data("ticketId", data.id);
                    $(row).addClass("selectable");
                },
                "ajax": {
                    "url": "@Url.Action("TicketsAjax", "User")",
                    "type": "POST",
                    "data": function (d) {
                        // Set here variables for you AJAX POST message.
                        d.id = @id;
                        d.companyId = @summary.CompanyId;
                        d.filtersJson = searchParms.filtersToJson();

                        console.log(d);
                    },
                    "dataSrc": function (response) {
                        // You can process the response here if needed.
                        return response;
                    }
                },
                "columns": [
                    { 
                        "className": "text-right"
                        "data": "id" 
                    },
                    { "data": "createDate" },
                    { "data": "createUserName" },
                    { "data": "title" },
                    { "data": "status" },
                    { "data": "actionDate" },
                ],
            }
        );

确保您的表格是这样的结构

<table>
<thead>
    <tr>
        <th>test</th>
        <th>somecolumn</th>
    </tr>
</thead>

【讨论】：

【解决方案2】：

-> 我有一个答案，但在纯 JS 中，而不是在 jQuery 中 – 乔乔先生
-> 可以分享一下吗？ – 瓦莱里

好像是这样的

假定的 HTML：

<table id="my-table">
  <thead>
  <td>Level</td><td>Name</td><td>Score</td>
  </thead>
  <tbody></tbody>
</table>

JS：

const Url         = '/Employee/GetClassificationLevels'
    , myTableBody = document.querySelector('#my-table tbody')

fetch(Url)
.then(resp=> resp.json())
.then(data=>{
  // ...
  data.forEach(classificator=>{
    let eRow = myTableBody.insertRow(-1)
      , nCol = 0

    eRow.insertCell(nCol++).textContent =  classificator.Level
    eRow.insertCell(nCol++).textContent =  classificator.Name
    eRow.insertCell(nCol++).textContent =  classificator.Score

      //... 
  })
})

【讨论】：