请求修正JavaScript通过AJAX调用PHP插入函数参数至数据库的代码

我帮你梳理了代码里的几个关键问题，修正后就能正常实现数据插入数据库的功能了：

JavaScript 代码问题及修正 #

原来的JS代码存在几个容易忽略的错误：

• 重复绑定点击事件：每次调用addRow都会给computeBtn添加一次点击监听，多次调用后点击按钮会发送多次请求
• URL参数包含空格：比如&abc = 里的空格会导致PHP无法正确识别参数名
• 变量大小写不匹配：函数参数是Grade（大写G），但URL里写的是小写grade
• AJAX事件名拼写错误：onstatechange应该是onreadystatechange
• 缺少响应状态判断：需要确认AJAX请求完成且成功后再处理响应
• 未对参数编码：特殊字符会破坏URL结构，要用encodeURIComponent处理

修正后的JavaScript代码 #

// 把点击事件绑定移到外面，避免重复绑定
computeBtn.addEventListener("click", () => {
    // 这里假设你要提交最后一条添加的学生数据，可根据实际逻辑调整
    const lastIndex = names.length - 1;
    const name = names[lastIndex];
    const first = fiM[lastIndex];
    const second = secM[lastIndex];
    const final = finalM[lastIndex];
    const partic = parti[lastIndex];
    const abc = Y_N[lastIndex];
    const Grade = grades[lastIndex];

    let xmlhttp = new XMLHttpRequest();
    // 去掉参数空格，用encodeURIComponent处理特殊字符
    const url = `addStudent.php?first=${encodeURIComponent(first)}&second=${encodeURIComponent(second)}&final=${encodeURIComponent(final)}&prt=${encodeURIComponent(partic)}&abc=${encodeURIComponent(abc)}&name=${encodeURIComponent(name)}&grade=${encodeURIComponent(Grade)}`;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    
    xmlhttp.onreadystatechange = function () {
        // 确认请求完成且状态成功
        if (this.readyState === 4 && this.status === 200) {
            console.log("请求响应：", this.responseText);
            alert("数据插入成功！");
        }
    };
});

function addRow(i, name, first, second, final, partic, abc, Grade) {
    names[i] = name;
    fiM[i] = first;
    secM[i] = second;
    finalM[i] = final;
    parti[i] = partic;
    Y_N[i] = abc;
    grades[i] = Grade;
}

PHP 代码问题及修正 #

原来的PHP代码主要有两个严重问题：

• SQL注入风险：直接把用户输入拼接到SQL语句里，非常容易被攻击
• 缺少错误处理和响应返回：没有检查数据库连接是否成功，也没有告诉JS请求是否成功

修正后的PHP代码 #

<?php
// 调试阶段启用错误提示，上线后可关闭
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 连接数据库并检查连接状态
$con = mysqli_connect("localhost", "root", "12345678", "advanceweb");
if (!$con) {
    die(json_encode(["status" => "error", "message" => "数据库连接失败：" . mysqli_connect_error()]));
}

// 安全获取GET参数，处理参数不存在的情况
$name = isset($_GET['name']) ? $_GET['name'] : '';
$first = isset($_GET['first']) ? $_GET['first'] : '';
$second = isset($_GET['second']) ? $_GET['second'] : '';
$final = isset($_GET['final']) ? $_GET['final'] : '';
$prt = isset($_GET['prt']) ? $_GET['prt'] : '';
$abc = isset($_GET['abc']) ? $_GET['abc'] : '';
$grade = isset($_GET['grade']) ? $_GET['grade'] : '';

// 使用预处理语句彻底避免SQL注入
$stmt = mysqli_prepare($con, "INSERT INTO `newstudent` (`StudentName`, `first`, `second`, `final`, `partcipation`, `Absences`, `grade`) VALUES (?, ?, ?, ?, ?, ?, ?)");
mysqli_stmt_bind_param($stmt, "sssssss", $name, $first, $second, $final, $prt, $abc, $grade);

// 执行查询并返回JSON格式的结果
if (mysqli_stmt_execute($stmt)) {
    echo json_encode(["status" => "success", "message" => "数据插入成功，ID：" . mysqli_insert_id($con)]);
} else {
    echo json_encode(["status" => "error", "message" => "插入失败：" . mysqli_stmt_error($stmt)]);
}

// 关闭语句和数据库连接
mysqli_stmt_close($stmt);
mysqli_close($con);
?>

关键说明 #

1. AJAX部分：把点击事件绑定移到addRow外面，避免重复触发请求；用模板字符串拼接URL更清晰，同时对每个参数编码，防止特殊字符破坏URL结构；添加了状态判断，确保请求成功后再处理响应。
2. PHP部分：使用预处理语句彻底解决SQL注入风险；添加了数据库连接和查询的错误处理，返回JSON格式的响应，方便JS判断请求结果；对每个GET参数做了存在性检查，避免未定义索引错误。

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