我想使用ajax表單提交表單而不刷新頁面。但是，當我第一次點擊提交按鈕時，它會提醒錯誤（在提示時顯示我提交表單的整個html頁面）。如果我關閉警報並再次點擊同一個提交按鈕而不刷新頁面，它會完美地提交表單。所以，每次刷新頁面時，我必須點擊提交按鈕，然後關閉錯誤警報，然後再次提交。我很確定它在ajax文件中有一些語法錯誤。所以，如果有人能幫助我，那麼將非常感激。在此先感謝ajax表單首次提交時返回錯誤，但在第二次點擊時提交
$('document').ready(function() {
/* validation */
$("#login-form").validate({
rules: {
upass: {
required: true
},
uemail: {
required: true,
email: true
},
},
messages: {
upass: {
required: "please enter your password"
},
uemail: "please enter your email address",
},
errorPlacement: function(error, element) {
$(element).closest('.form-group').find('.help-block').html(error.html());
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
submitHandler: submitForm
});
/* validation */
/* login submit */
function submitForm() {
var data = $("#login-form").serialize();
$.ajax({
type: 'POST',
url: 'login.php',
data: data,
dataType: 'json',
success: function(data) {
// console.log(data);
// alert(JSON.stringify(response));
// if(response == 1){
if (data.status == 'success') {
// alert('Good!');
alert(JSON.stringify(data));
window.location.href = "home.php";
} else {
window.location.href = "login_failed.php";
}
},
error: function(data) {
// console.log(JSON.stringify(data));
alert(JSON.stringify(data));
}
});
return false;
}
});HTML文件
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="assets/signup-form.css" type="text/css" />
</head>
<body>
<!--container starts-->
<div class="container">
<!--Header starts-->
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="logo">
<a href="index.php"><img src="images/logo.png" style="float:left"/></a>
</div>
<form method="post" action="login.php" id="login-form" class="form-inline" autocomplete="off">
<div class="form-group"><strong style="color:white; font-family:tahoma">Email:</strong>
<input type="email" class="form-control" placeholder="Email address" name="uemail" id="user_email" />
</div>
<!--<input type="email" name="uemail" placeholder="Email" required/>-->
<!--<input type="email" name="u_email" placeholder="Email" required="required"/>-->
<div class="form-group"><strong style="color:white; font-family:tahoma">Password:</strong>
<input type="password" class="form-control" placeholder="Password" name="upass" />
</div>
<!--<input type="password" name="upass" placeholder="Password" required/>-->
<!--<input type="password" name="u_pass" placeholder="********" required="required"/>-->
<button type="submit" name="login" class="btn btn-default">Login</button></br>
<!--<button type="submit" name="login"> Login </button>-->
<a href="forgot_password.php">Forgot your password?</a>
</form>
</div>
</nav>
<script src="js_files/login.js"></script>
<!-- <script src="js_files/login_failed.js"></script> -->
<!-- <script src="register_script.js"></script> -->
<script src="js_files/sign_up.js"></script>
</body>
</html>
而這個php文件的login.php
<?php
require_once 'class/head.class.php';
if(isset($_POST['login'])) {
$u_email = $_POST['uemail'];
$u_pass = $_POST['upass'];
try {
if(init::loginCheck($u_email) < 3){
if(users::login($u_email, $u_pass)) {
init::loginSuccess($u_email);
// init::redirect('home.php');
$response['status'] = 'success';
// $response['message'] = '<div class="alert alert-danger"><span class="glyphicon glyphicon-ok"></span> registered sucessfully, please confirm your email</div>';
// echo 1;
} else {
init::loginAttempt($u_email);
// init::redirect('home.php');
$response['status'] = 'redirect'; // could not register
// $response['message'] = '<div class="alert alert-warning"><span class="glyphicon glyphicon-info-sign"></span> You have entered incorrect login details. Please try again</div>';
// echo 0;
}
}
else {
$response['status'] = 'redirect';
}
}
catch(PDOException $e) {
echo $e->getMessage();
}
echo json_encode($response);
}
?>
返回的錯誤是 - （這是包含表格的html頁面）
{「readyState」：4，「responseText」：「\ n \ n \ n \ n \ n \ nhttps：//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min。 js \「> \ n \ n \ n \ nhttps：//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js \」integrity = \「sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa \」crossorigin = \「anonymous 「\ n \ n \ n \ nhttps：//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css \」integrity = \「sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz/K68vbdEjh4u \」crossorigin = \「anonymous \」> \ n \ n \ nhttps：//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css \「integrity = \」sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp \「crossorigin = \「anonymous \」> \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n電子郵件：\ n \ n \ n \ n \ n \ n \ n - > n - > \ n \ n密碼：\ n \ n \ n \ n \ n \ n - > \ n - > \ n登錄\ n登錄< /按鈕> - > \ n \ n忘記密碼？\ n \ n \ n \ n \ n \ n \ n \ n </script> - > \ n </script> - > \ n \ n \ n \ n「，」狀態 「：200，」 狀態文本 「：」 OK「}
有沒有我們可以看到的任何html？ – Rick
它返回什麼錯誤？ –
表格的代碼.. – Rick