Chrome/Brave正常的Ajax学生数据修改脚本在Firefox中失效求助

你的AJAX脚本在Firefox中失效，大概率是以下几个原因导致的，逐个排查修复即可：

一、JavaScript侧问题 #

1. 单选框未选中时的错误 #

Firefox中如果没有选中sexe单选框，document.querySelector('input[name="sexe"]:checked')会返回null，调用.value会直接抛出TypeError，中断整个函数执行。Chrome可能在测试场景下默认选中了选项，所以没触发这个问题。

修复方法：先判断单选框是否选中，未选中时提示用户并终止函数：

let sexeEl = document.querySelector('input[name="sexe"]:checked');
if (!sexeEl) {
    alert("Veuillez sélectionner un sexe !");
    return;
}
let sexe = sexeEl.value;

2. 变量名冲突风险 #

date是浏览器全局作用域下的敏感名称（和Date构造函数同名），可能在Firefox中引发隐式冲突，建议重命名变量：

// 原代码
let date = document.getElementById("date").value;
// 修改为
let birthDate = document.getElementById("date").value;

AJAX的data中对应字段名保持date即可，和PHP侧一致。

3. 缺少错误回调 #

当前代码只监听了success回调，无法捕获Firefox中可能出现的请求失败（比如网络错误、HTTP 500），添加error回调便于调试：

$.ajax({
    // 原有配置...
    error: function(xhr, status, error) {
        console.error("AJAX请求失败:", status, error);
        alert("Erreur lors de la modification : " + error);
    }
});

二、PHP侧问题 #

1. SQL保留字未转义+注入风险 #

DATE是MySQL的保留字，直接作为字段名会导致SQL语法错误，同时你的代码存在严重的SQL注入风险，建议改用参数绑定：

// 原SQL语句
$query = "UPDATE anciens SET NOM = '$nom', PRENOM = '$prenom', SEXE = '$sexe', DATE = '$date', CLASSE = '$classe', SITE = '$site', LOGIN = '$login', PASSWORD = '$password', EMAIL = '$email' WHERE ID = '$id'";
// 修改为（用反引号包裹保留字，参数绑定防注入）
$query = "UPDATE anciens SET NOM = :nom, PRENOM = :prenom, SEXE = :sexe, `DATE` = :date, CLASSE = :classe, SITE = :site, LOGIN = :login, PASSWORD = :password, EMAIL = :email WHERE ID = :id";

// 绑定参数
$statement->bindParam(':id', $id);
$statement->bindParam(':nom', $nom);
$statement->bindParam(':prenom', $prenom);
$statement->bindParam(':sexe', $sexe);
$statement->bindParam(':date', $date);
$statement->bindParam(':classe', $classe);
$statement->bindParam(':site', $site);
$statement->bindParam(':login', $login);
$statement->bindParam(':password', $password);
$statement->bindParam(':email', $email);

同时添加异常捕获，便于查看SQL执行错误：

try {
    $statement->execute();
    if ($statement->rowCount() > 0) {
        echo "Mise à jour réussie";
    } else {
        echo "Aucune mise à jour effectuée";
    }
} catch(PDOException $e) {
    echo "Erreur SQL : " . $e->getMessage();
}

三、调试步骤 #

1. 打开Firefox开发者工具（F12），查看控制台是否有JavaScript错误；
2. 在网络标签下查看AJAX请求的状态码和响应内容，确认请求是否正常发送到后端；
3. 确认jQuery已正确加载，在控制台输入$，返回函数则说明加载正常。

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