Javascript/Ajax 不将表单数据发送到 php 文件

Question

对于上下文，我正在尝试进行各种简单的测验。 有两个按钮：

1. 确认按钮：检查选择的答案是否正确。
2. 下一个按钮：用于转到下一个问题（该按钮已禁用，应禁用直到选择确认并正确检查答案）。

通过 php 文件检查所选答案。 我正在尝试使用 ajax，因为我认为页面重新加载会阻止单击“确认按钮”时启用“下一步”按钮。

我的问题是 ajax 似乎没有将表单数据发送到 php 文件，因为我没有从 php 文件中获得任何输出，即使 php 文件在没有 ajax 的情况下也能正常工作。

这是我的代码：

1-experiment_content.php:（这是测验表格所在的地方）

 <!-- FORM START -->
    <form id='stepform' method="post">
    <ul>
<?php
$result = mysqli_query($dbc, "SELECT * FROM step_answers WHERE step_id=$stepnum");
while ($row = mysqli_fetch_array($result)): ?>
    <li><input name="answer" type="radio" value="<?php echo $row['ans_number'] ?>"/><?php echo $row['ans_description']; ?></li>
<?php endwhile;?>
    </ul>
    <br>
     <!-- display Correct / Incorrect / Missing statements -->
    <span id="statement"><?php echo $statement ?></span>
    <br>

    <button type="Button" id="confirm">confirm</button>
    <button type="button" id="nextbtn" onclick="changeaction('next_step.php')">Next</button>

    <!-- send stepnum and experiment id to php files on submit -->
    <input type="hidden" id = "stepnum" name="stepnum" value="<?php echo $stepnum ?>"/>
    <input type="hidden" id = "id" name="id" value="<?php echo $id ?>"/>
    </form>

（id 和 stepnum 来自 GET 变量，我需要将它们发送到 check_step_answer.php 以进行进一步查询）。

2-script.js：

document.getElementById('confirm').addEventListener('click', getanswer);

function getanswer(e){
e.preventDefault();

var answer = document.querySelector('input[name="answer"]:checked').value;
var stepnum = document.getElementById('stepnum').value;
var id = document.getElementById('id').value;
var param = "answer="+answer+"&stepnum="+stepnum+"&id="+id;
console.log(param);
var xhr = new XMLHttpRequest();

xhr.onload = function(){console.log(this.status);}

xhr.onerror = function(){console.log("error");}

xhr.open('POST','check_step_answer.php', true);

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.send(param);
}

3-check_step_answer.php：

<?php
include_once 'db_connect.php';

$statement = '';

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $stepnum = $_POST['stepnum'];
    $expid = $_POST['id'];
    // get correct answer
    $result = mysqli_query($dbc, "SELECT * FROM experiment_steps WHERE exp_id=$expid AND step_num=$stepnum") or die($dbc->error . __LINE__);
    $row = mysqli_fetch_array($result);
    $correct_ans = $row['correct_ans'];

    //check if answer is correct or empty
    if (isset($_POST['answer'])) {
        if ($_POST['answer'] == $correct_ans) {
            $statement = 'correct';
        } else {
            $statement = 'incorrect';
        }
    } else {
        $statement = "select something";
    }
}

（我在experiment_content.php 中包含check_step_answer.php 以在页面上显示$statement）

我只包含了相关代码，请告诉是否需要进一步解释:)

我对 php 和 ajax 还是很陌生，所以我确定这是一个愚蠢的错误。 如果我可以用代码改进一些东西，请告诉<3。

非常感谢。

Answer 1

您必须将 XML 请求返​​回保存在一个变量中，然后使用它。 实际上，您没有在任何地方使用或调用请求返回！ 您可以使用xhr.onload = function(){}给定的文本/数据返回执行一些操作，例如：

xhr.onload = function(){
let requestReturn = xhr.responseText;
console.log(requestReturn) ;
}