Недавно я хотел сделать всплывающую форму с Ajax и Bootstrap. Для этого я получил этот код с учебного сайта. Затем я заметил, что мой код ничего не выскакивает, когда я нажимаю первую кнопку входа в систему (она должна работать в соответствии с руководством). В моем коде чего-то не хватает или это явно неправильно? Я только новичок. Пожалуйста помоги. Вот мой код:
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery</title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 align="center">Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery</h3><br />
<br />
<br />
<br />
<br />
<br />
<?php
if(isset($_SESSION['username']))
{
?>
<div align="center">
<h1>Welcome - <?php echo $_SESSION['username']; ?></h1><br />
<a href="#" id="logout">Logout</a>
</div>
<?php
}
else
{
?>
<div align="center">
<button type="button" name="login" id="login" class="btn btn-success" data-toggle="modal" data-target="#loginModal">Login</button>
</div>
<?php
}
?>
</div>
<br />
</body>
</html>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" />
<br />
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" />
<br />
<button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#login_button').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username != '' && password != '')
{
$.ajax({
url:"action.php",
method:"POST",
data: {username:username, password:password},
success:function(data)
{
//alert(data);
if(data == 'No')
{
alert("Wrong Data");
}
else
{
$('#loginModal').hide();
location.reload();
}
}
});
}
else
{
alert("Both Fields are required");
}
});
$('#logout').click(function(){
var action = "logout";
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function()
{
location.reload();
}
});
});
});
</script>
action.php
<?php
session_start();
$connect = mysqli_connect("localhost", "root", "", "database1");
if(isset($_POST["username"]))
{
$query = "
SELECT * FROM admin_login
WHERE admin_name = '".$_POST["username"]."'
AND admin_password = '".$_POST["password"]."'
";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
$_SESSION['username'] = $_POST['username'];
echo 'Yes';
}
else
{
echo 'No';
}
}
if(isset($_POST["action"]))
{
unset($_SESSION["username"]);
}
?>