jQuery Ajax响应严格等于'success'时判断逻辑不生效

我正在使用jQuery的Ajax功能将表单数据提交至PHP脚本，这部分功能运行完全正常。但当我尝试校验Ajax请求的响应值，以此确定需要向用户展示的SweetAlert提示内容时，功能出现异常：

• 当判断响应值等于"success"时，本应弹出的SweetAlert模态框无任何反应，但我在浏览器控制台中可以明确看到服务端仅返回了success内容
• 其余else if分支（即服务端返回对应匹配值的场景）下，SweetAlert均可正常触发

这套响应校验逻辑我已经使用了数月，此前一直运行稳定，但一天前突然失效，期间我并未更新或修改任何与SweetAlert、jQuery相关的代码。

问题代码 #

$("#createIncidentBtn").click(function(e) { //Kui uue intsidendi loomis nuppu vajutatakse, siis
    e.preventDefault();
    $("#createIncidentBtn").val('Please wait...'); //Muudab uuendamis nupu teksti
    message = simplemde.value();
    $.ajax({
        url: '/status/main/php/dashboard-process.php',
        method: 'POST',
        data: $("#new_incident_form").serialize()+'&action=new_incident'+'&message='+simplemde.value(),
        success:function(response) {
            $("#createIncidentBtn").val('Create Incident'); //Muudab intsidendi loomis nupu teksti
            console.log(response); //The response from the server is "success" (without the quotes)
            if(response === 'success') { //This if statement does not work
                Swal.fire({
                    title: 'New Incident successfully created!', //Näitab modali, mis ütleb, et informatsiooni uuendati edukalt
                    icon: 'success',
                    type: 'success'
                });
            } else if(response === 'No title or message') { //This else if statement works
                Swal.fire({
                    title: 'You forgot to enter a title or message!', //Näitab modali, mis ütleb, et informatsiooni uuendati edukalt
                    icon: 'error',
                    type: 'error'
                });
            } else if(response === 'Invalid incident status') { //This else if statement also works
                Swal.fire({
                    title: 'The incident status you have selected is invalid', //Näitab modali, mis ütleb, et informatsiooni uuendati edukalt
                    icon: 'error',
                    type: 'error'
                });
            }
        }
    });
});

异常表现 #

当我将第一个if判断修改为if(response.includes('success')) {时，功能就完全正常，SweetAlert模态框可以正常弹出。但我确认浏览器控制台中显示PHP脚本除了success外没有输出任何其他内容。我也检查了站点下的其他页面，所有页面突然都出现了同样的问题，这些页面我也没有做过任何修改，同时我已经确认脱离if判断时SweetAlert本身可以正常运行。

这是典型的响应字符串携带不可见空白字符，导致严格相等判断失效：

• 代码中使用===做严格相等判断，要求两边字符串的内容、长度完全一致才会判定为匹配
• 浏览器控制台默认会折叠首尾的换行、空格、UTF-8 BOM头这类不可见字符，所以肉眼看输出只有success，实际字符串首尾多了无法直接显示的冗余内容
• 全站点突然同时出现该问题，基本是公共PHP引入文件被改动导致：要么是<?php开标签前面多打了空格、空行，要么是文件被存成了带BOM的UTF-8格式，导致所有接口走完完整流程返回时，都会在业务输出内容前带上这些多余字符
• 另外两个错误分支能正常触发，是因为这两个分支的返回逻辑在代码中执行位置更早，还没等公共文件的多余内容输出就提前终止程序返回结果了，只有走成功分支时会走完完整执行流程，把多余字符一起返回给前端。

前端临时修复 #

在做响应值判断前，先对返回内容做首尾去空白处理，修改ajax的success回调逻辑即可：

success:function(response) {
    $("#createIncidentBtn").val('Create Incident');
    // 去除首尾所有不可见空白字符（换行、空格、制表符、BOM头等）
    const res = response.trim();
    if(res === 'success') {
        Swal.fire({
            title: 'New Incident successfully created!',
            icon: 'success'
        });
    } else if(res === 'No title or message') {
        Swal.fire({
            title: 'You forgot to enter a title or message!',
            icon: 'error'
        });
    } else if(res === 'Invalid incident status') {
        Swal.fire({
            title: 'The incident status you have selected is invalid',
            icon: 'error'
        });
    }
}

注：新版SweetAlert已经不需要重复配置type参数，保留icon配置即可正常显示图标。

后端根治方案 #

1. 排查所有PHP公共引入文件，确保文件的第一个字符就是<?php开标签，标签前不要存在任何空格、空行
2. 检查所有PHP文件的保存编码格式，统一选择「UTF-8 无BOM」格式保存，不要使用带BOM的UTF-8编码
3. 可以在PHP业务逻辑输出响应前调用ob_clean()函数，清空提前输出的无关内容，从根源避免多余字符被返回给前端。

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