如何通过AJAX调用更新HTML表？

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

这是我的表格：

 
  @{ int srno = 1; foreach (var pendingResponseModel in Model.hrPendingResponseList) {  @if (pendingResponseModel.DayDifference == "1") {  } else {  }  srno++; } } 
 
 
#
 
Name
 
Status
 
Since
 
 
@srno
 
@pendingResponseModel.CandidateName
 
@pendingResponseModel.CandidateLifeCycleStatusName
@(pendingResponseModel.DayDifference) day
@(pendingResponseModel.DayDifference) days
  

这是我的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.Status ， value.Status等查看它们

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

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

Answer 1

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

 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 ? '' + values.DayDifference + ' day ' : '' + values.DayDifference + ' days '; var tr = '' + '' + srno + '' + '' + values.CandidateName + '' + '' + values.CandidateLifeCycleStatusName + '' + daydifference + '' + srno++; $('#tblPendingHrResponse').append(tr); } 

Answer 2

你可以使用jQuery追加。

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

Answer 3

让您的控制器方法返回包含您的表或文章的部分。

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

然后更新jQuery中的表或文章：

你可以使用jQuery追加。

 success: function (data) { $("table").html(data); },