javascript - 如何在单击按钮时获得ajax响应

Question

我从 ajax 响应中获取 json 形式的表数据。
某些 json 数据未显示，但我希望通过单击按钮来获取它以用于其他目的。我怎样才能获取它？请帮助我。

 function leaveTable() {
     for (var i = 0; i < leaveList.length; i++) {
         var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn dltLev fa fa-times" onclick="cancelLeave(this)" data-dismiss="modal"  value="Cancelled"></i></td><tr>';

         $('#levListTable').append(tab)
     }
 }

从ajax响应中我想要leaveTypeId并将其传递到sendCancelReq()函数。
完整代码:https://jsfiddle.net/tytzuckz/18/

Answer 1

确切地知道你想要什么是很复杂的。我希望对您有所帮助:

首先，我要更改的是，不在 html 代码 var tab = ... 中生成 JavaScript 事件。我认为，当您在创建新的 dom 元素后添加事件时，它会更清晰易读。例如:

var tab = $('<tr id="' + i + '">' + 
  '<td>' + (i + 1) + '</td>' + 
  '<td class="appliedOn">' + leaveList[i].appliedOn + '</td>' + 
  '<td class="levType" >' + leaveList[i].levType + '</td>' + 
  '<td class="leaveOn" >' + leaveList[i].leaveOn + '</td>' + 
  '<td class="duration">' + leaveList[i].duration + '</td>' + 
  '<td class="status">' + leaveList[i].status + '</td>' + 
  '<td class="approvedOn">' + leaveList[i].approvedOn + '</td>' + 
  '<td class="approvedBy">' + leaveList[i].approvedBy + '</td>' + 
  '<td><i class="btn dltLev fa fa-times" data-dismiss="modal"  value="Cancelled"></i></td>' + 
  '<tr>');
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });

然后，您就可以更清楚地发送您的必要信息，例如:

代替最后的代码

$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });

你可以写

$(tab).find('.btn.dltLev').click(function () { cancelLeave(this, leaveList[i].leaveTypeId); });

并将您的方法 cancelLeave 扩展为:

function cancelLeave(elem, leaveTypeId) {
  var id = $(elem).closest('tr').attr('id')
  alert(id)
  $("#cancelLeave").modal("show");
  $('.sendCancelReq').val(id);
  sendCancelReq(leaveTypeId);

}