Php 设置html链接以使用jquery
我正在尝试创建一个单页应用程序。成功登录后,将显示一个成功页面(login_success.php),其中包含一个注销链接。当您单击注销链接时,我希望它清空“main”div,并将logout.php(一个“you have logout”页面)插入“main”div。但是,当我单击注销链接时,什么都没有发生(jquery似乎没有被执行)。我不确定如何处理链接中的“href”-因为我不希望页面实际发生更改。这是我的密码: js/application.jsPhp 设置html链接以使用jquery,php,jquery,login,hyperlink,single-page-application,Php,Jquery,Login,Hyperlink,Single Page Application,我正在尝试创建一个单页应用程序。成功登录后,将显示一个成功页面(login_success.php),其中包含一个注销链接。当您单击注销链接时,我希望它清空“main”div,并将logout.php(一个“you have logout”页面)插入“main”div。但是,当我单击注销链接时,什么都没有发生(jquery似乎没有被执行)。我不确定如何处理链接中的“href”-因为我不希望页面实际发生更改。这是我的密码: js/application.js $("logoutlinkdiv").
$("logoutlinkdiv").click(function() {
$(this).find('a').click(function ()) {
$("#main").empty();
$("#main").load("logout.php");
});
});
$(document).ready(function() {
$("#logoutlinkdiv a").click(function() {
event.preventDefault();
$("#main").empty();
$("#main").load("templates/logout.php");
});
});
模板/login_success.php
<?php
session_start();
if($_SESSION['username'] === null){
header("location: ../index.php");
}
?>
<!DOCTYPE html>
<html>
<body>
<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv">
<a href = "#">Log out</a>
</div>
</body>
</html>
<?php
session_start();
if($_SESSION['username'] === null){
header("location: ../index.php");
}
?>
<!DOCTYPE html>
<html>
<body>
<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv">
<a href = "#">Log out</a>
</div>
</body>
</html>
index.php
<!DOCTYPE html>
<html>
<head>
<title>it IT</title>
<script src="reqscripts/jquery.js"></script>
<script src="js/application.js"></script>
</head>
<body>
<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>
<div id="main"></div>
</body>
</html>
它
会员登录
用户名:
密码:
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;
}
else {
echo "Wrong Username or Password";
session_destroy();
}
?>
同样,当我在“login_success.php”中单击“logout”时,除了在url后面附加一个“#”之外,什么也没有发生(这应该发生,因为它是链接的占位符)。有什么建议吗?您必须将jQuery脚本放入
login\u success.php
:
<!DOCTYPE html>
<html>
<body>
<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv">
<a href = "#">Log out</a>
</div>
<script type="text/javascript">
$("#logoutlinkdiv a").click(function() {
$("#main").empty();
$("#main").load("logout.php");
});
</script>
</body>
</html>
阅读更多
更新v1
为什么在
#logoutlinkdiv
中搜索a
?只是为了燃烧性能你不需要这个。我已更新代码以清理它。使用事件.preventDefault()
防止浏览器跟随链接
您只需要一个单击处理程序;您已经嵌套了处理程序,这将导致一些奇怪的行为(每次单击logoutlinkdiv
时,它都会将另一个偶数侦听器附加到锚点,因此最终会多次触发事件)。另外,检查选择器语法,因为您有一个错误。我已将其更新为在logoutlinkdiv
中搜索所有锚点:
$("#logoutlinkdiv a").click(function(event) {
event.preventDefault();
$("#main").empty();
$("#main").load("logout.php");
});
我猜这只是一个输入错误,但您的HTML也没有显示导入
application.js
,请确保已导入该文件,否则将不会执行该文件。此函数错误。您缺少#
应该是这样的:
$("#logoutlinkdiv")
谢谢-我非常确定我的application.js正在被导入…我在index.php中有这个-
…我还有其他jquery代码在其中工作。我更改了代码以反映您的建议…仍然不走运。@ewizard抱歉。。。我的回答有一个输入错误:我忘了将事件
对象传递给click回调。我更新了我的答案;尝试一下,看看它是否有效。我实际上是在一个朋友的帮助下解决的…但是我在同一个程序中遇到了一个新问题…你可以在这里查看…谢谢你的回复…我修复了上面的错误…以及下面建议的我的jquery…仍然没有运气
$("logoutlinkdiv")
$("#logoutlinkdiv")