javascript - 我正在尝试实现具有多个输出的 Ajax 网络表单，但它不起作用

Question

我有一个问题。我正在尝试开发练习，在回答这些练习后，您可以知道每个答案是对还是错，并且我正在使用 json 来检索我可以在该论坛中阅读的回复。问题是 AJAX 代码不起作用，它没有显示任何内容。我不知道我的错误在哪里。

这是 Ajax(正确安装了 jQuery)。顺便说一句，控制台还向我抛出这个错误:console.fail function() 中的“JSON 中位置 0 的意外标记 w”，尽管如果我删除那段代码，无论如何 AJAX 表单都不起作用。

$(document).ready(function() {

  var request;

  $('form').submit(function(event) {
    event.preventDefault();
  if (request) {
        request.abort();
  }

  var $form = $(this);

  var $inputs = $form.find("input, select, button, textarea");

  var serializedData = $form.serialize();

  // $inputs.prop("disabled", true);

  request = $.ajax({
          data:  serializedData,
          url:   'exercise_matching_code.php',
          dataType: 'json',
          type:  'post',
          success:  function (data) {
            $(".message1").html(data.message1);
            $(".message2").html(data.message2);
            $(".message3").html(data.message3);
            $(".message4").html(data.message4);
            $(".message5").html(data.message5);
          }
    });
   // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });
    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });
  });
});

这是 PHP 文件

<?php
$a = $_POST["a"];
$b = $_POST["b"];
$c = $_POST["c"];
$d = $_POST["d"];
$e = $_POST["e"];
if ($a == '2') {
    $answer1 = "correct answer";
    echo $answer1;
} else {
    $answer1 = "wrong answer";
    echo $answer1;
}
if ($b == '4') {
    $answer2 = "correct answer";
} else {
    $answer2 = "wrong answer";
}
if ($c == '1') {
    $answer3 = "correct answer";
} else {
    $answer3 = "wrong answer";
}
if ($b == '5') {
    $answer4 = "correct answer";
} else {
    $answer4 = "wrong answer";
}
if ($b == '3') {
    $answer5 = "correct answer";
} else {
    $answer5 = "wrong answer";
}
echo json_encode(
  array(
    "message1" => "$answer1", 
    "message2" => "$answer2",
    "message3" => "$answer3",
    "message4" => "$answer4",
    "message5" => "$answer5",
  )
) 
?>

最后，这是 HTML 表单:

</script>
  <div class="row">
     <div class="large-12 columns">
     <p>Übung: Finde das Gegenteil:</p>
     <table style="width:100%">
      <tr>
        <td>a) schön</td>
        <td>1 alt</td> 
      </tr>
      <tr>
        <td>b) groß</td>
        <td>2 klein</td> 
      </tr>
      <tr>
        <td>c) neu</td>
        <td>3 langweilig</td> 
      </tr>
      <tr>
        <td>d) laut</td>
        <td>4 leise</td> 
      </tr>
      <tr>
        <td>e) interessant</td>
        <td>5 hässlich</td> 
      </tr>
     </table>
     </div>
  </div>
  <form action="" method="post">
    <div class="row">
       <div class="large-12 columns">
       <table style="width:100%">
      <tr>
        <td>a)</td>
        <td>
          <select name="a">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
          <div class="message1"></div>
        </td> 
      </tr>
      <tr>
        <td>b)</td>
        <td>
          <select name="b">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
          <div class="message2"></div>
        </td> 
      </tr>
      <tr>
        <td>c)</td>
        <td>
          <select name="c">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
          <div class="message3"></div>
        </td> 
      </tr>
      <tr>
        <td>d)</td>
        <td>
          <select name="d">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
          <div class="message4"></div>
        </td> 
      </tr>
      <tr>
        <td>e)</td>
        <td>
          <select name="e">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
          <div class="message5"></div>
        </td> 
      </tr>
      <tr>
     </table>
       </div>
    </div>
    <div class="row">
        <div class="large-12 columns submitting">
        <input type="submit" value="Go" class="submit">
        </div>
       </div>
  </form>

谢谢

Answer 1

我认为你的问题出在这里:

if ($a == '2') {
    $answer1 = "correct answer";
    echo $answer1;
} else {
    $answer1 = "wrong answer";
    echo $answer1;
}

您在输出 JSON 编码数组之前打印出一些内容，因此当您使用 AJAX 获取该页面并将数据类型设置为 JSON 时，它需要有效的 JSON 而不是其他任何内容。

Unexpected token w in JSON at position 0

这个错误或多或少证实了这一点。您的脚本在开头输出“wrong answer”，因此 JSON 解析在第一个字符处停止。

编辑:此外，在 c 的条件之后，您忘记将变量从 b 更改为 d 和 e。为防止此类错误，您需要重构代码。在这种情况下不需要多个条件，您应该使用循环。考虑这个脚本:

<?php
$correctAnswers = Array(
    "a" => 2,
    "b" => 4,
    "c" => 1,
    "d" => 5,
    "e" => 3
);

$messages = Array();
$messageNumber = 1;

foreach($correctAnswers as $question => $correctAnswer) {
    if($_POST[$question] == $correctAnswer) {
        $messages["message".$messageNumber] = "correct answer";
    } else {
        $messages["message".$messageNumber] = "wrong answer";
    }
    $messageNumber++;
}

print(json_encode($messages));
?>

这应该与您的 JS 和 HTML 表单 100% 兼容，因此您可以立即试用。它更干净并且不容易出错。