php - 显示 php 测验的结果而不重新加载页面

Question

这是一个简单的问题，但我就是不明白。

我有一个简单的表格:

<form action='#' method="post">

    <label for="question-1">Question One</label>

    <input type="radio" name="question-1-answers" value="1" />
    <input type="radio" name="question-1-answers" value="2" />

    <label for="question-2">Question Two</label>

    <input type="radio" name="question-2-answers" value="1" />
    <input type="radio" name="question-2-answers" value="2" />

    <input type="submit" value="Submit Quiz" class="submit"/>

</form>

然后我在results.php中有简单的php计算结果:

<?php

$answer1 = $_POST['question-1-answers'];
$answer2 = $_POST['question-2-answers'];

    $result = 0;

     $a =array( 0=> "$answer1", 1=> "$answer2"); 

    $result = array_sum($a)/count(array_filter($a));
    echo "Your score is: "; echo round($result, 1); 
?>

这一切都很好，但我希望当用户按下提交按钮时结果显示在与测验相同的页面上，而不需要重新加载页面。我知道我需要使用 jQuery，但我看到的每个地方都有不同的方法，但没有任何效果。

编辑:

所以我添加了以下内容:

 $function() {
   $.get('../results.php', function(data) {
   $('.result').html(data);
   alert('Load was performed.');
    });
}

和

<div class="result">The results are:</div>

并用 <input type="submit" value="Submit Quiz" class="submit" onclick="function()"/> 更新了提交按钮

当我单击提交按钮时，我仍然没有收到任何信息，当我检查控制台时，我得到的唯一错误是:Uncaught SyntaxError: Unexpected token {但我不知道哪里有多余的 {.

Answer 1

您将需要使用 jQuery 加载 PHP 测验结果 HTML 页面。然后你想将它注入(inject)到 dom 中。

包含 jQuery，然后这个示例应该可以工作，假设测验结果页面位于 (php/quizResult.php) - 您可以根据需要进行设置

jQuery

$.get('php/quizResult.php', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

HTML

<div class="result"></div>

将 jQuery 放入 JavaScript 中的函数中，并在需要加载结果时调用它。