Ajax请求成功后模态框仅第二次表单提交才弹出的问题排查

你的问题核心是首次提交表单时模态框不弹出，第二次正常，结合代码来看，主要有以下几个可能的原因和对应的解决办法：

1. JS加载顺序错误（最可能的原因） #

如果你的Bootstrap JavaScript文件是在自定义JS之后加载的，首次页面加载时，$(function(){})执行时Bootstrap的模态框方法还未注册到jQuery中，调用$("#successModal").modal("show")会直接报错，导致模态框无法弹出。而页面刷新后，浏览器缓存了Bootstrap JS，加载速度变快，方法已存在，所以第二次提交正常。

解决办法：
调整JS加载顺序，确保加载顺序为：
jQuery → Bootstrap JS → 你的自定义JS

2. 全局Ajax事件的干扰 #

你绑定了全局的ajaxSend和ajaxComplete事件，这些事件会在所有Ajax请求完成时触发，包括页面上其他可能存在的Ajax请求（比如表单验证器的异步请求）。这可能导致首次提交时，表单被提前重置或页面被意外刷新，打断模态框的显示流程。

解决办法：
移除全局的ajaxSend和ajaxComplete绑定，将逻辑移到当前表单Ajax请求的专属回调中：

$('#myform').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
        var formData = new FormData($('#myform')[0]);    
        $.ajax({
            url: 'add_report_do.php',
            enctype: 'multipart/form-data',
            type: 'POST',
            data: formData,
            beforeSend: function() {
                // 替代全局ajaxSend的逻辑
                $('#loading-indicator').show();
                $("#submitbtn").prop('disabled', true);
            },
            success: function(response) {
                $("#successModal").modal("show");
            },
            complete: function() {
                // 替代全局ajaxComplete的逻辑
                $('#loading-indicator').hide();
                $("#output").fadeTo(4000, 500).slideUp(500, function(){
                    $("#output").slideUp(500);
                });
                $("#myform")[0].reset();
                $("#submitbtn").prop('disabled', false);
                setTimeout(function(){
                    location.reload();
                }, 5000);
            },
            contentType: false,
            processData: false,
            cache: false
        });
        return false;
    }
})

3. 模态框HTML存在语法错误 #

你的模态框按钮类名有错误：<button type="button" class="btn btn- btn-primary" data-dismiss="modal">OK</button>，其中btn-是无效类名，可能导致模态框样式异常，首次加载时无法正常显示。

解决办法：
修正类名，改为：

<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>

4. 调试建议 #

在success回调中添加调试日志，确认是否执行到该逻辑：

success: function(response) {
    console.log("Ajax请求成功，准备弹出模态框");
    console.log("模态框元素是否存在：", $("#successModal").length);
    $("#successModal").modal("show");
}

打开浏览器控制台，查看首次提交时是否有报错或日志，进一步定位问题。

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