我正在使用Ajax，但页面仍然清爽，当我点击提交按钮

Question

我想要使用此代码。但是当我按下提交按钮时，Ajax不起作用，并且页面正在刷新。我不知道我的错误在哪里。

我正在使用json，因为我需要打印多个答案。例如，我需要显示每个答案是否正确。

我正在加载jQuery中的头，这是好的。

<script> 
$(document).ready(function() { 
    $('form').submit(function(event) { 
    var parametros = { 
      "a" : a, 
      "b" : b, 
      "c" : c, 
      "e" : d, 
      "d" : e 
    }; 
    $.ajax({ 
      data: parametros, 
      url: 'exercise_matching_code.php', 
      dataType: 'json', 
      type: 'post', 
      beforeSend: function() { 
        $("#resultado").html("Procesando, espere por favor..."); 
      }, 
      success: function (response) { 
      $(".message1").html(data.message1); 
      $(".message2").html(data.message2); 
      $(".message3").html(data.message3); 
      $(".message4").html(data.message4); 
      $(".message5").html(data.message5); 
      } 
    }); 
    }); 
}); 
</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> 

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

Answer 1

使用event.preventDefault()象下面这样： -

$('form').submit(function(event) { 
    event.preventDefault(); 

    //rest of the code 

}); 

参考： - https://api.jquery.com/event.preventdefault/

Answer 2

你需要有以下的一段的JavaScript来阻止表单提交。

$('form').on({ 
    submit: function() { 
     return false; 
    } 
});