Firefox中Bootstrap模态框提交出现NS_BINDING_ABORTED错误排查

你遇到的问题核心分为两点：

1. Firefox专属问题：提交按钮在表单内时，Ajax请求触发NS_BINDING_ABORTED错误，请求被中止；
2. 跨浏览器问题：提交按钮在表单外时，Ajax请求正常，但模态框无法自动隐藏。

NS_BINDING_ABORTED通常是客户端主动中止请求导致的，结合场景来看，大概率是Firefox下表单内的按钮触发了隐性的DOM变更（比如模态框提前关闭），或者Ajax参数格式不正确导致请求异常。

方案一：保留按钮在表单内，修复Firefox请求中止问题 #

1. 阻止事件默认行为与冒泡 #

取消注释event.preventDefault()，并添加事件冒泡阻止，避免Firefox下触发表单的隐性默认行为：

$("#submitApp").click(function(event) {
    event.preventDefault(); // 阻止表单默认提交（即使按钮是type="button"，仍需兜底）
    event.stopPropagation(); // 阻止事件冒泡，避免干扰模态框状态

    originalArray = $("#service_id").val();
    separator = ',';
    implodedArray = originalArray.join(separator);

    // 后续代码不变
});

2. 修正Ajax参数格式 #

你的代码中直接传递implodedArray，后端无法识别对应的参数名（应该是service_id），这会导致后端返回异常，间接触发请求中止：

var addAppointmentData = {
    location_id: $("#location_id").val(),
    client_id: $("#client_id").val(),
    service_id: implodedArray, // 替换原有的implodedArray，明确参数名
    start_date: $("#start_date").val(),
    end_date: $("#end_date").val(),
    a_appointment_notes: $("#a_appointment_notes").val()
};

3. 改用Bootstrap原生方法隐藏模态框 #

jQuery的modal('hide')在Bootstrap 5+环境下可能存在兼容性问题，替换为原生JS方法：

.done(function (data) {
    // 获取模态框实例并隐藏
    const modal = bootstrap.Modal.getInstance(document.getElementById('addappointment'));
    modal.hide();
    
    console.log(data);
    calendar.refetchEvents();
    // 若refetchEvents已能更新日历，可去掉location.reload()，避免不必要的页面刷新
    // location.reload();
})
// 添加错误回调排查问题
.fail(function(xhr, status, error) {
    console.error('请求失败:', status, error);
    console.error('后端响应:', xhr.responseText);
});

方案二：将按钮放在表单外，修复模态框不隐藏问题 #

如果更倾向于保持按钮在表单外，只需修改模态框隐藏的逻辑，改用Bootstrap原生方法即可：

.done(function (data) {
    const modal = bootstrap.Modal.getInstance(document.getElementById('addappointment'));
    modal.hide();
    
    console.log(data);
    calendar.refetchEvents();
    // location.reload();
})

• 确保后端/src/Pages/appointment/add.php能正确接收service_id参数（以逗号分隔的字符串）；
• 若使用Bootstrap 5，确保已正确引入Bootstrap的JS文件（而非仅CSS）；
• 移除location.reload()，因为calendar.refetchEvents()已能实现日历数据更新，页面刷新会打断用户体验。

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