将多个 AJAX 成功调用组合为一个

Group multiple AJAX success calls into one

本文关键字：一个 调用 AJAX 成功 组合      更新时间：2023-09-26

我正在使用表中的复选框更新数据库中的记录。我试图在所有更新完成后提供 1 个警报，而不是为每个单独的成功呼叫发出警报

  $('#update').click(function () {
$('#view_26 tbody input[type=checkbox]:checked').each(function() {
    var id = $(this).closest('tr').attr('id');
  $.ajax({
    url: 'https://api.knackhq.com/v1/objects/object_1/records/' + id,
    type: 'PUT',
    data: {field_1: 'Closed'},
    success: function (response) {
        alert('updated!');
    }
  });

这可能吗？

计算成功的呼叫数并与呼叫总数进行比较。

 $('#update').click(function () {
var calls=$('#view_26 tbody input[type=checkbox]:checked').length;
var success=0;
$('#view_26 tbody input[type=checkbox]:checked').each(function() {
    var id = $(this).closest('tr').attr('id');
  $.ajax({
    url: 'https://api.knackhq.com/v1/objects/object_1/records/' + id,
    type: 'PUT',
    data: {field_1: 'Closed'},
    success: function (response) {
success+=1;
if(success==calls) alert('updated!');
        }
  });

也许您还应该接听不成功的电话。

你能构建和放置整个 JSON 数组而不是一次一行吗？ 当然，这需要修改 Web 服务以从 JSON 而不是 URL 获取记录 ID。 以这种方式限制呼叫是一种更好的做法。 

$('#update').click(function () {
var myJSON=[];
$('#view_26 tbody input[type=checkbox]:checked').each(function() {
    var id = $(this).closest('tr').attr('id');
  myJSON.push({ID:id,field_1:'Closed'});
});
//end of each

$.ajax({
    url: 'https://api.knackhq.com/v1/objects/object_1/records/',
    type: 'PUT',
    data: myJSON,
    success: function (response) {
        alert('updated!');
    }
  });

您需要做的就是将复选框的长度与索引进行比较，以查看它们是否相等，如下所示。

$('#update').click(function () {
    var checkboxes = $('#view_26 tbody input[type=checkbox]:checked'),
        len = checkboxes.length;
    checkboxes.each(function(i) {
        var id = $(this).closest('tr').attr('id');
        $.ajax({
            url: 'https://api.knackhq.com/v1/objects/object_1/records/' + id,
            type: 'PUT',
            data: {field_1: 'Closed'},
            success: function (response) {
                if (i === len - 1 ) {
                    alert('updated!');
                }
            }
        });
    })
});

尝试

$('#update').click(function () {
  var elem = $('#view_26 tbody tr input[type=checkbox]:checked');
  var res = $.map(elem, function(el, i) {
    var id = $(el).closest('tr').attr('id');
    console.log(id);
    return $.ajax({
      url: 'https://api.knackhq.com/v1/objects/object_1/records/' + id,
      type: 'PUT',
      data: {field_1: 'Closed'}
    });
  });
  $.when.apply($, res)
  .then(function() {
      alert("updated!");
  }, function(jqxhr, textStatus, errorThrown) {
      alert(textStatus +" "+ jqxhr.status +" "+ errorThrown);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="update">update</button>
<table id="view_26">
  <tbody>
    <tr id="0">
      <td>
      <input type="checkbox" value="">
        </td>
    </tr>
        <tr id="1">
      <td>
      <input type="checkbox" value="">
        </td>
    </tr>
        <tr id="2">
      <td>
      <input type="checkbox" value="">
        </td>
    </tr>
    </tbody>
  </table>

相关文章：