通过document.querySelector取值并经AJAX+PHP存入数据库遇问题求助

修正后的JS代码 #

$(document).ready(function () {
    $("#submit").click(function () {
        // 正确获取<i>标签的文本内容，trim()去除首尾空白
        let no = document.querySelector('i[data-name="no"]').textContent.trim();
        let question = document.querySelector('i[data-name="question"]').textContent.trim();
        let countdown = document.querySelector('i[data-name="countdown"]').textContent.trim();
        let answer = document.querySelector('i[data-name="answer"]').textContent.trim();
        
        // 用对象传递数据，避免编码问题
        var postData = {
            no: no,
            question: question,
            countdown: countdown,
            answer: answer
        };
        
        if (!no || !question || !countdown || !answer) {
            alert("请填写所有字段");
        } else {
            $.ajax({
                type: "POST",
                url: "post-answer.php",
                data: postData,
                cache: false,
                success: function (result) {
                    alert(result);
                },
                error: function(xhr, status, error) {
                    // 增加错误处理，方便排查问题
                    alert("请求出错：" + error);
                }
            });
        }
        return false;
    });
});

额外优化建议 #

1. 确保标签内容已填充：检查checkboxtrue()、checkboxfalse()等函数，确认它们能正确给对应<i>标签设置文本内容，例如document.querySelector('i[data-name="answer"]').textContent = "Benar";。
2. PHP端数据安全处理：在post-answer.php中接收$_POST数据时，需做好过滤与转义，优先使用预处理语句防止SQL注入。
3. 表单内a标签跳转拦截：表单中的<a href="">会触发页面跳转，建议改为<a href="#" onclick="return false;">或在点击事件中阻止默认行为，避免打断AJAX请求。