Ajax成功提示Alert失效问题求助

我编写了一段Ajax代码，点击按钮后表单数据能正常提交，但成功状态下的alert提示框无法正常显示，用户因无反馈重复点击导致重复提交表单。当前使用Firefox浏览器，不确定是否因此引发问题，作为技术新手恳请帮助。

我的代码如下：

$("#enquiry").on("click",function(){
    $.ajax({
        url: "<?php echo base_url(); ?>product/enquiry/<?php echo $type;?>",
        data:    $("#enquiry_form").serialize() ,
        type: "POST",
        dataType: "json",
        success: function(data) {
            console.log(data);
            if (data.status == true) {
                //show success message
                alert(data.msg);
                $('#enquiry_form')[0].reset();
                $('.error').html('');
            }else{
                $.each(data.errors, function(key, val) {
                    console.log(val);
                    $('[id="span_'+ key +'"]').html(val);
                });
            }
        }
    });
});

排查与解决步骤 #

• 阻止表单默认提交行为
  最可能的原因是按钮触发了表单的默认提交逻辑，导致页面刷新，Ajax的success回调还没执行完页面就跳转，alert根本来不及显示。给点击事件添加阻止默认行为的代码：

  $("#enquiry").on("click",function(event){
      event.preventDefault(); // 加上这行，阻止表单默认提交
      $.ajax({
          // 原有Ajax配置内容
      });
  });
  

• 检查控制台的data结构
  打开Firefox开发者工具（按F12）切换到「控制台」标签，查看请求成功后打印的data内容：

  • 确认data.status的类型：如果后端返回的是字符串"true"而非布尔值true，data.status == true的判断会不成立（字符串与布尔值的隐式转换会导致判断错误）。可以改成严格相等判断data.status === true，或者根据实际返回值调整为data.status == "true"。
  • 确认data.msg是否存在且有有效内容，避免alert弹出空内容或undefined。

• 添加错误回调排查JSON解析问题
  你设置了dataType: "json"，如果后端返回的JSON格式存在语法错误，jQuery会无法解析，直接跳过success回调。添加error回调查看错误信息：

  $.ajax({
      // 原有配置内容
      success: function(data) { ... },
      error: function(xhr, status, error) {
          console.log("请求错误信息:", error);
          console.log("后端返回内容:", xhr.responseText);
      }
  });
  

  如果控制台显示JSON解析错误，需要修复后端返回的JSON格式，确保没有逗号遗漏、引号不匹配等语法问题。

• 临时替换alert为console.log测试
  某些浏览器环境下alert可能被屏蔽，或者因页面刷新被打断，可以先把alert(data.msg)换成console.log("成功提示:", data.msg)，查看控制台是否能打印出内容，以此判断success分支是否被正常执行。

内容的提问来源于stack exchange，提问作者redmacgirl