确认弹窗后执行数据保存，AJAX成功回调alert无法显示问题排查

看起来你已经搭好了确认弹窗、数据校验和保存的核心逻辑，数据能成功保存但回调里的alert没弹出来，大概率是这几个细节问题导致的，咱们一步步排查修复：

可能的问题点及对应解决方案 #

1. 页面刷新打断了AJAX回调 #

你的event.preventDefault()是放在数据校验通过后才调用的，如果#add-btn是表单的提交按钮，页面可能在AJAX请求完成前就触发了默认提交并刷新，直接中断了回调执行。

修复： 把阻止默认行为的代码移到函数最开头，从根源避免页面跳转：

$('#add-btn').on('click', function(event){
    // 先阻止默认提交/跳转行为
    event.preventDefault();
    var confirmation = confirm("Do you want to save ?");
    // 后续代码不变...
});

2. 后端返回的JSON格式不合法 #

你设置了dataType: "json"，如果后端add_data.php返回的不是标准JSON格式（比如有语法错误、响应头Content-Type不是application/json），jQuery会解析失败，直接跳过success回调。

验证方法： 打开浏览器开发者工具（F12）→ 切换到Network标签，找到这个POST请求：

• 检查Response里的内容是否是合法JSON，比如{"status":"success"}，没有多余的HTML、空格或语法错误
• 确认Response Headers里的Content-Type是application/json; charset=utf-8

后端修复示例（PHP）：

// 先设置正确的响应头
header('Content-Type: application/json');
// 输出标准JSON结构
echo json_encode(['status' => 'success']);
exit;

3. 未处理AJAX错误场景 #

你的代码只写了success回调，但如果请求超时、后端报错、网络异常等，都会导致回调不执行，你完全看不到错误信息。

修复： 添加error回调来排查问题：

$.ajax({
    type: "POST",
    url: "../public/process/add_data.php",
    data: dataString,
    dataType: "json",
    cache: false,
    success: function(data){
        console.log('后端返回数据：', data); // 先打印到控制台确认是否进入回调
        if(data.status == 'success'){
            alert("Success !");
        } else if(data.status == 'error'){
            alert("Data already used !");
        }
    },
    error: function(xhr, status, error){
        console.error('AJAX请求出错：', status, error);
        alert('保存请求发生错误，请查看控制台日志');
    }
});

4. 数据组装遗漏字段（小细节） #

你获取了name和final的值，但组装dataString时没把这两个字段加进去，如果后端需要这两个值，可能会导致逻辑隐患，建议补上：

var dataString = 'code=' + code + '&name=' + name + '&unit=' + unit + '&price_code=' + price_code + '&type=' + type + '&final=' + final;

修改后的完整代码 #

$('#add-btn').on('click', function(event){
    // 先阻止默认行为，避免页面刷新打断请求
    event.preventDefault();
    
    var confirmation = confirm("Do you want to save ?");
    if (confirmation == true) {
        var code = $('#code').val();
        var name = $('#name').val();
        var unit = $('#unit').val();
        var price_code = $('#price_code').val();
        var type = $('#type').val();
        var final = $('#final').val();
        
        // 补上遗漏的name和final字段
        var dataString = 'code=' + code + '&name=' + name + '&unit=' + unit + '&price_code=' + price_code + '&type=' + type + '&final=' + final;
        
        if (code != '' && name != '' && unit != '' && price_code != '' && type != '' && final != ''){
            $.ajax({
                type: "POST",
                url: "../public/process/add_data.php",
                data: dataString,
                dataType: "json",
                cache: false,
                success: function(data){
                    console.log('后端返回数据：', data);
                    if(data.status == 'success'){
                        alert("Success !");
                    } else if(data.status == 'error'){
                        alert("Data already used !");
                    }
                },
                error: function(xhr, status, error){
                    console.error('AJAX请求失败：', status, error);
                    alert('保存请求出错，请检查控制台日志');
                }
            });
        } else{
            alert('Please fill all fields !');
        }
    }
});

按照上面的步骤排查，应该就能解决alert不显示的问题了。

内容的提问来源于stack exchange，提问作者Jaya Hendro Gunawan