Javascript 我试图实现一个具有多个输出的Ajax webform，但它不起作用

我有个问题。我正在尝试开发练习，在回答之后，你可以知道每个答案是对的还是错的，我正在使用json检索我在这个论坛上读到的答案。问题是AJAX代码不起作用，没有显示任何内容。我不知道我的错误在哪里

这就是Ajax（jQuery安装正确）。顺便说一句，控制台也会在console.fail function（）中抛出以下错误：“位置0处JSON中的意外标记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>

Übung:Finde das Gegenteil:

a） 舍恩
1 alt
b） 格罗什
2克莱因
c） 纽
3朗威利格
d） 劳特
4雷泽
e） 有趣的
5 hässlich
（a）
1.
2.
3.
4.
5.
（b）
1.
2.
3.
4.
5.
（c）
1.
2.
3.
4.
5.
（d）
1.
2.
3.
4.
5.
（e）
1.
2.
3.
4.
5.

---

谢谢

我认为你的问题在于：

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

在输出JSON编码的数组之前先打印出一些内容，因此，当您使用AJAX获取该页面并将数据类型设置为

JSON

，它只需要有效的JSON而不需要其他内容

JSON中位于位置0处的意外标记w

这个错误或多或少地证实了这一点。脚本在开头输出“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%兼容，所以您可以立即试用。它更干净，而且不容易出错

你不是已经发布了这个，并且得到了一个你接受的答案吗？或者这是一个完全不同的问题吗？考虑使用一个循环代替每个变量的一个独立的条件表达式。这是另一个问题弗莱德。在这种情况下，我解决了这个问题（当我单击提交按钮时，网页正在刷新。这是另一个不同的问题。谢谢。no problemo@AlvaroLópezSánchezThanks，这是正确的。我解决了这个问题，它工作了！您的代码中有更多错误，请检查对我答案的编辑。