[英]Reload a page after successfully submit a form using ajax
我目前正在使用ajax制作登錄表單
<div id='error3'></div>
<input type='email' required name='email' id='email' placeholder='Email'>
<input type='password' required name='password' id='password' placeholder='password'>
<input type='submit' name='submit99' id='submit' value='login'>
我的Java腳本是
<script>
$(document).ready(function(){
$("#submit").click(function(){
var emailnew = $("#email").val();
var password = $("#password").val();
var dataString = '&email='+ email + '&password='+ password;
if(emailnew==''|| password='')
{
document.getElementById('error3').innerHTML="Please Fill All Fields";
}
else
{
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
cache: false,
success: function(result){
document.getElementById('error3').innerHTML=result;
}
});
}
return false;
});
});
而我的process.php腳本是
<?php
if(isset($_POST['email']))
{
if (filter_var($email99, FILTER_VALIDATE_EMAIL))
{
$con=mysqli_connect('localhost','root','password','database');
$query="SELECT * FROM TABLENAME WHERE USER='' AND PASSWORD=''";
$result=mysqli_query($con,$query);
if(mysqli_num_rows($result)!=0)
{
echo "You are successfully logged in";
login user
start a cookie or session
}
else
{
echo "You are bot a valid user";
}
}
else
echo "not a valid email";
}
?>
現在,如果我們收到一條消息“您已成功登錄”,則刷新當前頁面,否則僅顯示錯誤消息,而不刷新頁面。
我可以選擇添加
<meta http-equiv="refresh" content="30">
但這僅適用於chrome,不適用於Firefox。
您可以將條件放入循環success: function(result){
<script>
$(document).ready(function () {
$("#submit").click(function () {
var emailnew = $("#email").val();
var password = $("#password").val();
var dataString = '&email=' + email + '&password=' + password;
if (emailnew == '' || password = '') {
document.getElementById('error3').innerHTML = "Please Fill All Fields";
} else {
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
cache: false,
success: function (result) {
if (result == "You are successfully logged in") {
document.location.href = 'login.htm';
} else {
document.getElementById('error3').innerHTML = result;
}
}
});
}
return false;
});
});
</script>
嘗試這個:
<script>
$(document).ready(function () {
$("#submit").click(function () {
var emailnew = $("#email").val();
var password = $("#password").val();
var dataString = '&email=' + email + '&password=' + password;
if (emailnew == '' || password = '') {
document.getElementById('error3').innerHTML = "Please Fill All Fields";
}
else {
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
cache: false,
success: function (result) {
document.getElementById('error3').innerHTML = result;
if (result == "You are bot a valid user") {
window.location.href = "mypage.html"
}
}
});
}
return false;
});
});
</script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var emailnew = $("#email").val();
var password = $("#password").val();
var dataString = '&email='+ email + '&password='+ password;
if(emailnew == null || password == null)
{
document.getElementById('error3').innerHTML="Please Fill All Fields";
}
else
{
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
cache: false,
success: function(result)
{
if(result == "logged in true")
{
window.setTimeout(function(){location.reload()},1000); //reload with time
location.reload(); //reload without time
}
else
{
document.getElementById('error3').innerHTML=result;
}
}
});
}
return false;
});
});
</script>
您的process.php應該返回類似成功(true)和不成功(false)標志的結果。 或userID(例如,如果成功),或者其他一些標志(如果失敗)。 您不應在proccess.php文件中回顯通知。 那么您可以在JavaScript代碼中包含以下內容:
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
cache: false,
success: function(result){
if(result=='successful'){
showMessageAndredirectFunction();
//in this functionyou can show the message in your html page like the way you do for error and with a delay redirect the page with javascript
else
document.getElementById('error3').innerHTML="Bad usernaem or password";
}});
您可以在process.php中設置會話(如果成功)。
window.location.reload()
用於通過使用javascript重新加載頁面。 或者您可以使用window.location.href=window.location.href;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.