在数据库中保存数据而不需要在php中重定向 - save data in database without redirection in php

save data in database without redirection in php

我有一个简单的表单，我想在不重定向的情况下将数据保存在数据库中。我使用php, ajax和jquery为我的页面。我不知道我是否做错了什么，但在我点击提交按钮后，表单数据出现在地址栏上。数据成功存储在数据库中，但页面也重新加载。我的代码如下:

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

您正在调用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 } }); } });
参考

As Loading..指出您需要事件预防默认，但在表单提交事件，如:

$('form').on('submit', function(e){ return false; });
提交时返回false = e.p preventdefault + e.p sotppropagation