我使用的是Ajax，但当点击提交按钮时，页面仍然清爽 [英] I'm using Ajax, but the page is still refreshing when I click on submit button

问题描述

我正在尝试使用此代码。但是当我按下提交按钮时，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'，
类型：'post'，
 beforeSend ：函数（）{
 $（＃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> 5hä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 =submitvalue =Goclass =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 =正确答案; 
 echo $ answer1; 
} else {
 $ answer1 =错误答案; 
 echo $ answer1; 
} 
 if（$ b =='4'）{
 $ answer2 =正确答案; 
} else {
 $ answer2 =错误答案; 
} 
 if（$ c =='1'）{
 $ answer3 =正确答案; 
} else {
 $ answer3 =错误答案; 
} 
 if（$ b =='5'）{
 $ answer4 =正确答案; 
} else {
 $ answer4 =错误答案; 
} 
 if（$ b =='3'）{
 $ answer5 =正确答案; 
} else {
 $ answer5 =错误答案; 
} 
 echo json_encode（
 array（
message1=>$ answer1，
message2=>$ answer2，
message3=>$ answer3，
message4=>$ answer4，
message5=>$ answer5，
）
）
？> 
  

解决方案使用 event.preventDefault ）像下面这样： -
$ b $ $ $ $ $ $''''''。submit（function（event）{
event.preventDefault（）;

//其余代码

}）;

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

I am trying to use this code. But Ajax doesn't work and the page is refreshing when I press the submit button. I don't know where is my mistake.

I'm using json because I need to print multiple answers. For instance, I need to show if each answer is correct.

I'm loading jQuery in the header, that is OK.

  <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>

And this is the php file:-

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

解决方案

Use event.preventDefault() like below:-

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

  //rest of the code

});

Reference:- https://api.jquery.com/event.preventdefault/

这篇关于我使用的是Ajax，但当点击提交按钮时，页面仍然清爽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！