PHP AJAX在线测验点击题号后next跳转异常及无法跳转结果页问题排查

故障根因说明 #

1. 全局题号变量未更新：侧边栏题号点击事件中声明了局部变量questionno，没有修改全局的题号变量，导致点击next时仍使用旧的全局题号值跳转，出现回到旧题的问题。
2. 结果页跳转条件不匹配：load_questions中判断跳转的条件是responseText == 1，但后端Question_load.php无题目时返回的是字符串over，条件永远不触发，无法跳转到结果页。

具体修复步骤 #

1. 修复全局题号更新逻辑

修改Question.php中的侧边栏点击事件，去掉局部变量声明的var，直接更新全局的questionno：

// 原代码
$(document).on('click', '.next_QUESTION', function(){  
    var questionno = $(this).data("id");  
    load_questions(questionno);  
});
// 修改后
$(document).on('click', '.next_QUESTION', function(){  
    questionno = $(this).data("id");  
    load_questions(questionno);  
});

2. 修复结果页跳转条件

修改Question.php中load_questions的判断逻辑，和后端返回值匹配，增加trim()避免空白字符干扰判断：

// 原代码
if(xmlhttp.responseText == 1){
    window.location="result.php";    
}
// 修改后
if(xmlhttp.responseText.trim() == "over"){
    window.location="result.php";    
}

3. 实现已答题目导航变绿色功能

首先修复侧边栏题号的重复ID问题（HTML中ID必须唯一），修改Question.php的题号渲染代码：

<!-- 原代码 -->
<p type='button' id="quest-number" class='next_QUESTION' class="display" data-id="<?php echo $i ?>" ><?php echo $i ?></p>
<!-- 修改后 -->
<p type='button' id="quest-<?php echo $i ?>" class='next_QUESTION display' data-id="<?php echo $i ?>" ><?php echo $i ?></p>

然后修改radioclick保存答案的回调，保存成功后直接修改对应题号的样式：

function radioclick(radiovalue, questionno){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // 给已答题号设置绿色背景
            const questEl = document.getElementById('quest-' + questionno);
            questEl.style.backgroundColor = '#2ecc71';
            questEl.style.color = '#fff';
        }
    };
    xmlhttp.open("GET", "ajax/save_answer_in_session.php?questionno="+ questionno + "&value1=" + radiovalue, true);
    xmlhttp.send(null); 
}

如果需要页面初始化时就显示已答题目状态，可在全局初始化的位置调用接口拉取已答题号列表，遍历设置样式即可。

可选优化项 #

• 替换不安全的eval转换，使用parseInt处理题号计算：

// load_previous和load_next中的计算逻辑修改为
questionno = parseInt(questionno) - 1;
questionno = parseInt(questionno) + 1;

• 修复Question.php中排序SQL的错误写法：

// 原代码
$sql = "SELECT * FROM questions  WHERE category=? ORDER BY question_no=?  ASC";
$stmt->bind_param("ss",$category,$question_no);
// 修改后，排序字段不需要传参
$sql = "SELECT * FROM questions  WHERE category=? ORDER BY question_no ASC";
$stmt->bind_param("s",$category);

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