html表單使用php和ajax提交

Question

試圖將簡單的電子郵件數據從網站存儲到mysql數據庫中，我已經編寫了代碼，但是它不起作用，我無法弄清楚

 <form class="subfield">
            <input type="text" id="emailInput" name="email" type='email' placeholder="Enter Your Email here" required>
            <input type="submit" id="inputSubmit" value="Subscribe">
            <span id="st">Email Subscribed!</span>

        </form>

<script type="text/javascript">

    $(document).ready(function(){  
  $('#inputSubmit').click(function(){ 
      var email = $('#emailInput').val();
            $.ajax({  
                 url:"form_process.php",  
                 method:"POST",  
                 data:{email:email},  
                 success:function(data){  
                      $("form").trigger("reset");  
                      $('#st').fadeIn().html(data);  
                      setTimeout(function(){  
                           $('#st').fadeOut("Slow");  
                      }, 2000);  
                 } 
            });  

  });  
  });  
  </script>


<?php  


//insert.php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 if(isset($_POST["email"]))  
 {  
      $email = mysqli_real_escape_string($connect, $_POST["email"]);   
      $sql = "INSERT INTO `emails_list`(`email`) VALUES ('".$email."')"; 
      if(mysqli_query($connect, $sql))  
      {  
           echo "email Subscribed";  
      }  
 }   
 ?>

單擊提交按鈕時，它會重定向到主頁，URL也顯示？email =部分，但數據庫中沒有存儲任何數據，似乎也沒有從php發送回聲

編輯：我注意到文件另存為index.php而不是index.html是否有必要另存為index.php

Answer 1

防止瀏覽器動作不正常的可能方法。 然后在提交時調用ajax請求。

$(document).ready(function(){ 
     $('#inputSubmit').click(function(e){ 
          e.preventdefault();
          var email = $('#emailInput').val();       
          $.ajax({
                  url:"form_process.php",    
                  method:"POST",
                  data:{email:email},      
                  success:function(data){
                       $("form").trigger("reset");
                       $('#st').fadeIn().html(data);    
                       setTimeout(function(){
                            $('#st').fadeOut("Slow");
                        }, 2000);
                  }
           });
    });
 }); 

Answer 2

您可以做兩件事：

使用按鈕代替提交

這個：

 <input type="submit" id="inputSubmit" value="Subscribe">

至：

<input type="button" id="inputSubmit" value="Subscribe">

使用preventDefault方法

$(document).ready(function() {
  $("#inputSubmit").click(function(e) {
    e.preventDefault();
    var email = $("#emailInput").val();
    $.ajax({
      url: "form_process.php",
      method: "POST",
      data: { email: email },
      success: function(data) {
        $("form").trigger("reset");
        $("#st")
          .fadeIn()
          .html(data);
        setTimeout(function() {
          $("#st").fadeOut("Slow");
        }, 2000);
      }
    });
  });
});

Answer 3

$(document).ready(function(){ 
     $('#inputSubmit').click(function(e){ 
          e.preventdefault();
          var email = $('#emailInput').val();       
          $.ajax({
                  url:"form_process.php",    
                  method:"POST",
                  data:{email:email},      
                  success:function(data){
                       $("form").trigger("reset");
                       $('#st').fadeIn().html(data);    
                       setTimeout(function(){
                            $('#st').fadeOut("Slow");
                       }, 2000);
                  }
           });
           return false;
      });
});