JavaScript跨浏览器AJAX表单提交兼容性指南

<form id="myForm">
    <!-- 其他表单元素 -->
    <input type="submit" value="保存修改" onclick="setBDD()">
</form>

<form id="myForm">
    <!-- 其他表单元素 -->
    <button type="button" onclick="setBDD()">保存修改</button>
    <!-- 或者使用input标签 -->
    <!-- <input type="button" value="保存修改" onclick="setBDD()"> -->
</form>

<script>
    function setBDD() {
        if (confirm("Êtes vous sur de vouloir changer ces informations ?") === true){ // 确认弹窗
            // 获取表单值
            let id = document.getElementById("id").value;
            let nom = document.getElementById("nom").value;
            let prenom = document.getElementById("prenom").value;
            let sexe = document.querySelector('input[name="sexe"]:checked').value;
            let date = document.getElementById("date").value;
            let classe = document.getElementById("classe").value;
            let site = document.getElementById("site").value;
            let login = document.getElementById("login").value;
            let password = document.getElementById("password").value;
            let email = document.getElementById("email").value;

            // 发起AJAX请求
            $.ajax({
                type: "POST",
                url: "modifier-a.php",
                data: {
                    id: id,
                    nom: nom,
                    prenom: prenom,
                    sexe: sexe,
                    date: date,
                    classe: classe,
                    site: site,
                    login: login,
                    password: password,
                    email: email
                },
                success: function(response) {
                    console.log(response);
                    // 在此处添加页面刷新逻辑
                    // location.reload(); // 请求成功后刷新页面
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", status, error);
                    alert("修改失败，请重试！");
                }
            });
        } else {
            alert('Annulation de la modification !');
        }
    }
</script>

success: function(response) {
    console.log(response);
    alert("信息更新成功！"); // 给出用户反馈
    location.reload(); // 刷新页面以显示最新数据
}

<?php
include "include-php/connexion.php"; // 数据库连接文件

// 检查所有必需的POST数据是否已设置
if (isset($_POST['id']) && isset($_POST['nom']) && isset($_POST['prenom']) && isset($_POST['sexe']) && isset($_POST['date']) && isset($_POST['classe']) && isset($_POST['site']) && isset($_POST['login']) && isset($_POST['password']) && isset($_POST['email']) ) {
    // 获取POST数据
    $id = $_POST['id'];
    $nom = $_POST['nom'];
    $prenom = $_POST['prenom'];
    $sexe = $_POST['sexe'];
    $date = $_POST['date'];
    $classe = $_POST['classe']; 
    $site = $_POST['site'];
    $login = $_POST['login'];
    $password = $_POST['password']; // 注意：密码应加密存储和传输
    $email = $_POST['email'];

    // 准备SQL更新语句
    // 警告：直接将POST数据拼接到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";

    $statement = $pdo->prepare($query);

    // 绑定参数，防止SQL注入
    $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);
    $statement->bindParam(':id', $id);

    $statement->execute();

    if ($statement->rowCount() > 0) {
        echo "Mise à jour réussie"; // 更新成功
    } else {
        echo "Aucune mise à jour effectuée"; // 没有行被更新
    }

    // 关闭数据库连接
    $pdo = null;
} else {
    echo "缺少必要参数"; // 如果缺少POST数据
}
?>