jQuery Ajax提交数据到数据库或刷新后如何将计数器重置为0

根因说明 #

你现有代码已经在Ajax的success回调中写了count = 0的重置逻辑，但存在两个场景会导致计数器不同步：

1. 仅在Ajax请求完全成功时才会重置计数器，若出现网络异常、后端报错等情况，计数器不会清零，下次新增会延续之前的数值
2. 若你删除了所有已添加的行但未触发提交操作，全局计数器不会自动重置，新增行的ID也会继续累加

修复方案 #

方案1：完善现有计数器逻辑（最小改动） #

补充两个场景的计数器重置规则即可：

1. Ajax无论请求成功失败都强制重置计数器
2. 用户删除所有行后自动重置计数器

修改提交表单的Ajax代码：

$.ajax({
    url:"pages/insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
        $('#action_alert').html('<p>Data Inserted Successfully</p>');
        $('#action_alert').dialog('open');
    },
    // 新增complete回调，无论成功失败都重置计数器和清空表格
    complete: function() {
        count = 0;
        $('#user_data').find("tr:gt(0)").remove();
    },
    // 可选：新增错误提示
    error: function() {
        $('#action_alert').html('<p>提交失败，请重试</p>');
        $('#action_alert').dialog('open');
    }
})

修改删除行的逻辑：

$(document).on('click', '.remove_details', function(){
    var row_id = $(this).attr("id");
    if(confirm("Are you sure you want to remove this row data?")) {
        $('#row_'+row_id+'').remove();
        // 新增：删除后判断剩余行数，如果为0就重置计数器
        if($('.first_name').length === 0) {
            count = 0;
        }
    }  else  {
        return false;
    }
});

方案2：彻底不依赖全局计数器（更稳妥推荐） #

每次新增行时直接读取当前表格行数生成ID，完全避免全局变量不同步问题，无需再维护计数器重置逻辑：
修改保存按钮的新增行逻辑：

if($('#save').text() == 'Save')
{
    // 替换原来的count++，直接计算当前行数生成ID
    var currentCount = $('#user_data tr').length;
    output = '<tr id="row_'+currentCount+'">';
    output += '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+currentCount+'" class="first_name" value="'+first_name+'" /></td>';
    output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+currentCount+'" value="'+last_name+'" /></td>';
    output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+currentCount+'">View</button></td>';
    output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+currentCount+'">Remove</button></td>';
    output += '</tr>';
    $('#user_data').append(output);
}

内容的提问来源于stack exchange，提问作者Masaba James Moses