如何將ajax結果放入html表？

Question

我能夠使用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表。

Answer 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>

Answer 2

->我有一個答案，但使用純JS，而不是jQuery – Jojo先生
->您可以分享嗎？ –瓦列里

看起來像

假定的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

      //... 
  })
})