ajax — страница входа обновляется после кнопки отправки
Попробовал некоторые решения здесь, однако это не сработало, как ожидалось. Страница входа обновляется каждый раз, когда я нажимаю кнопку «Войти». Мои коды на данный момент:
index.php
<?php include('header.php'); ?>
<body id="login">
<div class="container">
<div class="row-fluid">
<div class="span6"><div class="title_index"><?php include('title_index.php'); ?></div></div>
<div class="span6"><div class="pull-right"><?php include('login_form1.php'); ?></div></div>
</div>
<div class="row-fluid">
<div class="span12"><div class="index-footer"><?php include('link.php'); ?></div></div>
</div>
<?php include('footer.php'); ?>
</div>
<?php include('script.php'); ?>
</body>
</html>
login_form.php
<form id="login_form1" class="form-signin" method="post">
<h3 class="form-signin-heading"><i class="icon-lock"></i> Sign in</h3>
<input type="text" class="input-block-level" id="username" name="username" placeholder="Username" required>
<input type="password" class="input-block-level" id="password" name="password" placeholder="Password" required>
<button data-placement="right" title="Click Here to Sign In" id="signin" name="login" class="btn btn-info" type="submit"><i class="icon-signin icon-large"></i> Sign in</button>
<script type="text/javascript">
$(document).ready(function(){
$('#signin').tooltip('show');
$('#signin').tooltip('hide');
});
</script>
</form>
<script>
jQuery(document).ready(function(){
jQuery("#login_form1").submit(function(e){
e.preventDefault();
var formData = jQuery(this).serialize();
$.ajax({
type: "POST",
url: "login.php",
data: formData,
success: function(html){
if(html=='true')
{
$.jGrowl("Loading File Please Wait......", { sticky: true });
$.jGrowl("Welcome to Learning Management System", { header: 'Access Granted' });
var delay = 1000;
setTimeout(function(){ window.location = 'dashboard_teacher.php' }, delay);
}else if (html == 'true_student'){
$.jGrowl("Welcome to Learning Management System", { header: 'Access Granted' });
var delay = 1000;
setTimeout(function(){ window.location = 'student_notification.php' }, delay);
}else
{
$.jGrowl("Please Check your username and Password", { header: 'Login Failed' });
}
}
});
return false;
});
});
</script>
login.php
<?php
include('dbcon.php');
session_start();
$username = $_POST['username'];
$password = $_POST['password'];
/* student */
$conn = mysqli_connect('localhost','root','','capstone');
$result = mysqli_query($conn, "SELECT * FROM student WHERE username='$username' AND password='$password'")or die(mysqli_error($conn));
$num_row = mysqli_num_rows($result);
$row = mysqli_fetch_array($result);
/* teacher */
$conn = mysqli_connect('localhost','root','','capstone');
$query_teacher = mysqli_query($conn, "SELECT * FROM teacher WHERE username='$username' AND password='$password'")or die(mysql_error($conn));
$num_row_teacher = mysqli_num_rows($query_teacher);
$row_teahcer = mysqli_fetch_array($query_teacher);
if( $num_row > 0 )
{
$_SESSION['id']=$row['student_id'];
echo 'true_student';
}
else if ($num_row_teacher > 0)
{
$_SESSION['id']=$row_teahcer['teacher_id'];
echo 'true';
}
else
{
echo 'false';
}
?>
Кстати у меня два логина, админ и пользователь. Логин администратора работает отлично, в то время как логин пользователя (этот) обновляется всегда на странице входа. Я использовал те же коды для администратора. Спасибо!
Решение
Попробуйте изменить <button> для <input> с type="submit"
Другие решения
Вам нужно изменить код для login_form.php:
<form id="login_form1" class="form-signin" method="post">
<h3 class="form-signin-heading"><i class="icon-lock"></i> Sign in</h3>
<input type="text" class="input-block-level" id="username" name="username" placeholder="Username" required>
<input type="password" class="input-block-level" id="password" name="password" placeholder="Password" required>
<button data-placement="right" title="Click Here to Sign In" id="signin" name="login" class="btn btn-info" type="button"><i class="icon-signin icon-large"></i> Sign in</button>
<script type="text/javascript">
$(document).ready(function(){
$('#signin').tooltip('show');
$('#signin').tooltip('hide');
});
</script> </form> <script>
jQuery(document).ready(function(){
jQuery("#login_form1").submit(function(e){
e.preventDefault();
var formData = jQuery(this).serialize();
$.ajax({
type: "POST",
url: "login.php",
data: formData,
success: function(html){
if(html=='true')
{
$.jGrowl("Loading File Please Wait......", { sticky: true });
$.jGrowl("Welcome to Learning Management System", { header: 'Access Granted' });
var delay = 1000;
setTimeout(function(){ window.location = 'dashboard_teacher.php' }, delay);
}else if (html == 'true_student'){
$.jGrowl("Welcome to Learning Management System", { header: 'Access Granted' });
var delay = 1000;
setTimeout(function(){ window.location = 'student_notification.php' }, delay);
}else
{
$.jGrowl("Please Check your username and Password", { header: 'Login Failed' });
}
}
});
return false;
});
}); </script>