Я использую Ajax, но страница все еще освежает, когда я нажимаю кнопку submit

Я пытаюсь использовать этот код. Но 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", ) ) ?>

Используйте event.preventDefault() как event.preventDefault() ниже:

 $('form').submit(function(event) { event.preventDefault(); //rest of the code });

Ссылка: – https://api.jquery.com/event.preventdefault/

Для предотвращения отправки формы необходимо иметь следующий фрагмент JavaScript.

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