將數據保存在數據庫中，而無需在php中進行重定向

Question

我有一個簡單的表單，我想在不重定向的情況下將數據保存在數據庫中。 我正在為頁面使用php，ajax和jquery。 我不知道我是否做錯了什么，但是在單擊“提交”按鈕后，表單數據出現在地址欄上。 數據已成功存儲在數據庫中，但頁面也重新加載。 我的代碼如下。

HTML

<form>
<input type="text" placeholder="Full Name*" required pattern= "[a-zA-Z]+" title="Alphabets only" name="name" id="name">
<input type="email" placeholder="Email*" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" name="email" id="email">
<input type="text" placeholder="Contact*" required pattern="[0-9]\d{9}" title="only 10 digit allowed" name="contact" id="contact">
<textarea placeholder="Enquiry(if any)" name="msg" id="msg"></textarea>
<button type="submit" name="register" id="register_btn">Register</button>
<span id="success"></span>
<span id="error"></span>
</form>

PHP

    include("conn/connect.php");
    if(isset($_POST['email'])){
    $email= mysqli_real_escape_string($connect, $_POST['email']);
    $name= mysqli_real_escape_string($connect, $_POST['name']);
    $contact= mysqli_real_escape_string($connect, $_POST['contact']);
    $msg= mysqli_real_escape_string($connect, $_POST['msg']);
    $sql= "INSERT INTO registration(email, name, contact, msg, added_on) values('$email','$name','$contact','$msg', now())";
    if(mysqli_query($connect, $sql))
    {
        echo '<h4>Registration Complete</h4>';
    }

}

JAVASCRIPT

<script>  
$(document).ready(function(){  
$('#register_btn').click(function(){  
  var name = $('#name').val();  
  var email = $('#email').val();
  var contact = $('#contact').val();
  var msg = $('#msg').val();  
  if(name == '' || email == '' || contact == '')  
  {  
      $('#error').html("<h4>Mandatory field(s) are empty</h4>");
      setTimeout(function(){  
          $('#error').fadeOut("Slow");  
          }, 3000);  
        }  
  else  
      {  
        $('#error').html('');  
        $.ajax({  
           url:"registration.php",  
           type:"POST",  
           data:{name:name, email:email, contact:contact, msg:msg},  
           success:function(data){  
           $("form").trigger("reset");  
           $('#success').fadeIn().html(data);  
           setTimeout(function(){  
              $('#success').fadeOut("Slow");  
             }, 3000);  
           }  
        });  
     }  
   });  
  });  
</script>

Answer 1

您正在調用“ submit按鈕上的事件，該事件將刷新頁面。

在您的點擊函數中使用event.preventDefault() 。

$(document).ready(function(){  
  $('#register_btn').click(function(event){  
     event.preventDefault();
  });
});

僅供參考，如果您的驗證停止工作，請嘗試執行此操作。

$('#register_btn').click(function(event) {
  //Check form is valid
  if ($(this).closest('form')[0].checkValidity()) {
    // stop form from redirecting to java servlet page
    event.preventDefault();


    $.ajax({
      type: form.attr("method"), // use method specified in form attributes
      url: form.attr("action"), // use action specified in form attributes
      data: form.serialize(), // encodes set of form elements as string for submission
      success: function(data) {
        // get response from servlet and display on page via jQuery 
      }
    });
  }
});

參考

Answer 2

正如Loading ..指出的那樣，您需要事件阻止默認值，但是在表單提交事件中是這樣的：

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

提交時返回false = e.preventDefault + e.sotpPropagation