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

Question

我正在使用 table 中的复选框更新数据库中的记录。我试图在所有更新完成后提供 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!');
    }
  });

这可能吗？

Answer 1

统计您的成功调用并与调用总数进行比较。

 $('#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!');
        }

  });

也许你也应该捕捉不成功的呼叫。

Answer 2

您能否构建并 PUT 整个 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!');
    }

  });

Answer 3

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

$('#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!');
                }
            }
        });
    })
});

Answer 4

尝试

$('#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>

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

Group multiple AJAX success calls into one

javascript

jquery

ajax

jquery-click-event