如何通过AJAX调用更新HTML表

How to update an HTML table through AJAX call?

本文关键字：HTML 更新 调用 何通过 AJAX      更新时间：2023-09-26

伙计们，我有一个html表在我的ASP.net MVC home视图。现在，表最初通过模型中的数据填充。现在点击主页上的某些按钮，我想更新表中存在的数据，即清除表中存在的数据，并从ajax调用中更新它。

这是我的表from view:

<article class="scrlable">
<table>
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Status</td>
        <td>Since</td>
    </tr>
    @{   
    int srno = 1;
    foreach (var pendingResponseModel in Model.hrPendingResponseList)
    {
    <tr>
        <td>@srno</td>
        <td>@pendingResponseModel.CandidateName</td>
         <td>@pendingResponseModel.CandidateLifeCycleStatusName</td>
          @if (pendingResponseModel.DayDifference == "1")
                {
          <td>@(pendingResponseModel.DayDifference) day</td>
                    }
                    else
                    {
                        <td>@(pendingResponseModel.DayDifference) days</td>
                    }
                </tr>
                    srno++;
                }
            }
        </table>
    </article>
这是我的ajax调用: 
function GetStatusWise(control, departCode) {
    $.ajax(
        {
            type: "GET",
            url: "...URL..." + departCode,
            dataType: "json",
            crossDomain: true,
            async: true,
            cache: false,
            success: function (data) {
                $.each(data.data, function (index, value) {
                 // UPDATE TABLE HERE...
                });
            },
            error: function (x, e) {
                alert('There seems to be some problem while fetching records!');
            }
        }
    );
}

ajax调用返回的数据是JSON格式的。它有Name、Status和Since元素。它们可以用value.CandidateName, value.Status等来观察

现在我想用我通过AJAX调用获得的值来更新上面表的值。我该怎么做呢?是否可以替换整篇文章?

注意:我通过ajax调用得到多个值，所以这就是为什么我在函数上放了一个循环。

我已经通过以下代码解决了我的问题

function GetStatusWise(control, departCode) {
    $.ajax(
        {
            type: "GET",
            url: WebApiURL + ".....URL...." + departCode,
            dataType: "json",
            crossDomain: true,
            async: true,
            cache: false,
            success: function (data) {
                var srno = 1;
                $('#tblPendingHrResponse').find($('.trTblPendingHrResponse')).remove();
                $.each(data.data, function (index, value) {
                    random(value, srno);
                    srno++;
                });
            },
            error: function (x, e) {
                alert('There seems to be some problem while fetching records!');
            }
        }
    );
}

. 

function random(values, srno) {
        var daydifference = values.DayDifference == 1 ? '<td>' + values.DayDifference + ' day </td>' : '<td>' + values.DayDifference + ' days </td>';
        var tr = '<tr class="trTblPendingHrResponse">' +
        '<td>' + srno + '</td>' +
        '<td>' + values.CandidateName + '</td>' +
        '<td>' + values.CandidateLifeCycleStatusName + '</td>' +
         daydifference + '</tr>' + srno++;
        $('#tblPendingHrResponse').append(tr);
    }

可以使用jQuery追加。

success: function (data) {
    $.each(data.data, function (index, value) {
        $("table").html("Your HTML to updated");
    });
},

让你的控制器方法返回一个包含表格或文章的部分。

[HttpPost]
public virtual ActionResult GetTable(ArticleViewModel viewModel)
{
    // do stuff
    return PartialView("_ArticleTable", viewModel);
}

然后在jQuery中更新表或文章:

你可以使用jQuery追加。

success: function (data) {
    $("table").html(data);
},
相关文章：