我正在尝试实现具有多个输出的Ajax webform,但它无法正常工作

时间:2017-03-15 17:51:48

标签: javascript php jquery json ajax

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

这是Ajax(jQuery已正确安装)。顺便说一下,控制台也向我抛出这个错误:“在控制台.fail函数()中的位置0的JSON中出现意外的令牌w”,尽管如果我删除了那段代码,无论如何AJAX表单都不起作用。

nix-collect-garbage -d

这是PHP文件

$(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
        );
    });
  });
});

最后,这是HTML表单:

<?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",
  )
) 
?>

由于

1 个答案:

答案 0 :(得分:2)

我认为你的问题在于:

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

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

  

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

此错误或多或少地证实了这一点。您的脚本输出&#34; w rong answer&#34;在开头,所以JSON解析停在第一个字符。

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

<?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%兼容,因此您可以立即尝试。它更清洁,并且不容易出错。