checklogin.php
<?php
session_start();
$host="localhost"; // Host name
$username="root"; // Mysql username
$password="bonjour3"; // Mysql password
$db_name="itit"; // Database name
$tbl_name="members"; // Table name
// Connect to server and select databse.
$mysqli = new mysqli("$host", "$username", "$password", "$db_name")or die("cannot connect");
// Define $myusername and $mypassword
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];
$sql = $mysqli->prepare("SELECT * FROM $tbl_name WHERE username=? and password=?");
$sql->bind_param('ss',$myusername,$mypassword);
$sql->execute();
$sql->store_result();//apply to prepare statement
$numRows = $sql->num_rows;
if($numRows === 1){
$_SESSION['username'] = $myusername;
var_dump($_SESSION['username']);
}
else
{
echo "Wrong Username or Password";
session_destroy();
}
?>
当有人使用此表单登录时,将运行上述脚本:
模板/索引表单.php
<?php
session_start();
?>
<form id="login" method="post" action="checklogin.php">
<h1>Member Login</h1>
<p>Username:<input name="myusername" type="text" id="myusername"></p>
<p>Password:<input name="mypassword" type="password" id="mypassword"></p>
<input type="submit" name="Submit" value="Login">
</form>
上面的模板被加载到索引中.php(如下(。我正在尝试编写一个 SPA,因此所有内容都使用 jquery 加载和卸载到"主"div 中。
索引.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>it IT</title>
<script src="reqscripts/jquery.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
下面是加载和卸载元素的 jquery/ajax 代码:
JS/应用程序.js
$(document).ready(function() {
$("#main").load("templates/indexforms.php", function () {
//When login form is submitted
$("#login").submit(function(e) {
e.preventDefault();
$.post("checklogin.php", $(this).serialize(), function() { //ajax post call
$("#main").load("templates/login_success.php"); //load template
$("#login").remove(); //remove form
});
});
$(document).on("click", "#logoutlinkdiv a", function(e) {
e.preventDefault();
$("#main").empty();
$("#main").load("templates/logout.php");
});
$(document).on("click", "#loginlinkdiv a", function(e) {
e.preventDefault();
$("#main").empty();
$("#main").load("templates/indexforms.php");
});
});
});
登录后,jquery 加载一个"login_success.php"模板:
模板/login_success.php
<?php
session_start();
?>
<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv" >
<a href = "#" >Log out</a>
</div>
如果单击"logoutlinkdiv"链接,jquery将加载模板"logout.php":
模板/注销.php
<?php
session_start();
session_destroy();
?>
<div id="loginlinkdiv" >
<h2>You have been logged out.</h2>
<a href = "#">Log in</a>
</div>
如果您单击上述模板上的"登录"链接...索引窗体.php模板已加载(上图(。然后,我尝试再次登录。checklogin.php 脚本运行并显示 'string(4( 'obey''。这是有道理的,因为我在 checklogin.php 的 if 块中对用户名(obey(进行了var_dump()
。但是,似乎 jquery 没有被执行...因为login_success.php页面永远不会加载。如果我重新加载"index.php"并再次登录...它有效 - 基本上,我不明白为什么我的程序流是这样的。
更新
这是我在 NET 选项卡下的火虫控制台中看到的内容。一堆请求堆积如山 - 直到我第二次登录。然后,请求清除...并且只剩下一个请求:
我加载索引页,看到:
GET http://localhost/~Eamon/ 200 OK
GET http://localhost/~Eamon/templates/indexforms.php 200 OK
我单击登录链接并看到:
POST http://localhost/~Eamon/checklogin.php 200 OK
GET jquery.js 304 Not Modified
GET application.js 304 Not Modified
GET http://localhost/~Eamon/templates/login_success.php 200 OK
我单击注销链接并看到:
GET http://localhost/~Eamon/templates/logout.php 200 OK
然后我再次单击将我带到登录页面的链接,我看到:
GET http://localhost/~Eamon/templates/indexforms.php 200 OK
然后,我输入我的信息并再次登录,所有请求都清除了,我只看到:
POST http://localhost/~Eamon/checklogin.php 200 OK
我想我应该看到:
POST http://localhost/~Eamon/checklogin.php 200 OK
GET jquery.js 304 Not Modified
GET application.js 304 Not Modified
经过一番研究,我想我修复了它......我不得不将我的 jquery 更改为:
...
$(document).on("click", "#loginlinkdiv a", function(e) {
e.preventDefault();
location.reload();
$("#main").load("templates/indexforms.php");
});
...
我不认为该应用程序正在执行.js(第二次登录时(,因为索引.php在单击"登录链接div"链接时没有重新加载脚本......我能想到的唯一方法是使用我认为是重新加载索引location.reload();
.php - 并且脚本正在再次读取。任何能够澄清为什么这有效(或可能提出更好的答案(的人都会得到赞誉。