Question

我使用表格中的复选框更新数据库中的记录。我试图在所有更新完成后提供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

尝试

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

4 个答案: