SPA登录系统的起点 [英] Beginnings of an SPA login system
问题描述
我试图用php / mysql / jquery实现一个简单的登录系统。我希望它是一个单一的页面应用程序，所以我有这个我的index.php：
<？php在session_start（）; ？>
<！DOCTYPE html>
< html>
< head>
< title> it IT< / title>
< script src =reqscripts / jquery.jstype =text / javascript>< / script>
< script src =js / application.jstype =text / javascript>< / script>
< / head>
< body>
< div id =main>< / div>
< / body>
< / html>
我有这个给我的jquery：
js / application.js
$（document）.ready（function（）{
$（＃main ）.load（templates / indexforms.php）;
$（＃login）。submit（function（e）{
e.preventDefault（）;
$ .post（checklogin.php，$（this）.serialize（），function（）{
$（＃main）。load（templates / login_success.php）;
$（＃login）。remove（）;
$（＃register）。remove（）;
}）;
}）;
}）;
这个表单被加载（templates / indexforms.php）：
<？php session_start（）; ？>
< form id =loginmethod =postaction =checklogin.php>
< h1>会员登入< / h1>
< p>用户名：< input name =myusernametype =textid =myusername>< / p>
< p>密码：< input name =mypasswordtype =passwordid =mypassword>< / p>
< input type =submitname =Submitvalue =Login>
< / form>
现在，当我尝试登录时，它卡在 localhost / 〜Eamon / checklogin.php （它没有任何html）并且呈现一个完全空白的页面（根本没有源代码）。我是否需要在我的indexforms.php模板中包含application .js？我会在哪里做这件事？另外，如果你看看我的jquery，我在DOM准备好之后加载表单 - 但是在表单提交之后...表单应该被删除 - 并且应该加载login_success.php。
$ b
更新
checklogin.php
<？php
session_start（）;
$ host =localhost; //主机名称
$ username =xxx; // Mysql用户名
$ password =xxx; // Mysql密码
$ db_name =itit; //数据库名称
$ tbl_name =members; //表名
//连接服务器并选择databse。
$ mysqli = new mysqli（$ host，$ username，$ password，$ db_name）或die（无法连接）;
//定义$ myusername和$ 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（）; //应用于准备语句
$ numRows = $ sql-> num_rows;
if（$ numRows === 1）{
$ _SESSION ['username'] = $ myusername;
}
else {
echo错误的用户名或密码;
session_destroy（）;
}
？>
更新
<我不认为我的JavaScript文件正在加载。我把 alert（here）放在e.preventDefault之前，没有任何反应......是我的application.js文件的第二行搞乱了事情？为什么它没有被加载？
我在这里找到了 - 这是否有助于任何人？
使用脚本标记加载的JavaScript文件本质上是阻塞的。下载并执行脚本时，页面上发生或加载的所有内容都将暂停。请记住，这适用于每个脚本标签。一些现代的浏览器可能会让你同时下载这些内容，但是页面的其他部分仍然没有做任何有意义的事情。
UPDATE
在checklogin.php的if块中放入 echosuccess ...像这样（在底部）：
...
if（$ numRows === 1）{
$ _SESSION ['username'] = $ myusername;
回声成功;
}
else {
echo错误的用户名或密码;
session_destroy（）;
}
？>
，它永远不会到达那里。如果我把它放在if语句之前，它会显示echo消息......这意味着用户不会在我的数据库中找到......或类似的东西？
UPDATE
$ b $
在之后放置像这样： var_dump（$ numRows） $ numRows = $ sql-> num_rows;
...
$ numRows = $ sql-> num_rows;
var_dump（$ numRows）;
if（$ numRows === 1）{
$ _SESSION ['username'] = $ myusername;
}
...
我得到int（1）作为响应。 ..
$ b
更新
更改checklogin.php中的if条件：
if（$ numRows ===int（1））{
$ _SESSION ['username'] = $名为myUsername;
}
else {
echo错误的用户名或密码;
session_destroy（）;
}
else块被执行，我看到错误的用户名或密码我应该。
$ b
更新
将jquery代码更改为...仍然没有运气：
$（document）.ready（function（）{
$（＃main）。 load（templates / indexforms.php，function（）{
$（＃login）。submit（function（e）{
e.preventDefault（）;
$ .post （checklogin.php，$（this）.serialize（），function（）{
$（＃main）。load（templates / login_success.php）;
$（ （）;
$（＃register）。remove（）;
}）;
}）;
}）;
}）;
更正
<上面的代码是正确的！我只需要重新启动服务器！谢谢！
更新
发现一个新问题，一个简单的登录系统水疗/ php / mysql / jquery
b $ b尝试将JavaScript更改为此：
$（document）.ready（function（）
{
$（＃main）。load（templates / indexforms.php，function（）
{
$（＃login）。submit（function（e）
{
e.preventDefault（）;
$ .post（checklogin.php，$（this）.serialize（），function（）
{
$（＃main）。load（templates / login_success.php）;
$（＃login）。remove（）;
$（＃register）。remove（）;
}）;
}
）
}
）
}
）
注意脚本一直等到 indexforms.php 加载到 #main #login （此时它试图在同一时间做几乎所有的事情），所以 $（ #login）。submit（... 在任何 #login 元素之前运行）。
I am trying to implement a simple login system with php/mysql/jquery. I want it to be a single page app, so I have this for my "index.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>
I have this for my jquery:
js/application.js
$(document).ready(function() {
$("#main").load("templates/indexforms.php");
$("#login").submit(function(e) {
e.preventDefault();
$.post("checklogin.php", $(this).serialize(), function(){
$("#main").load("templates/login_success.php");
$("#login").remove();
$("#register").remove();
});
});
});
This form gets loaded (templates/indexforms.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>
Right now, when I try to login - it gets stuck on localhost/~Eamon/checklogin.php (which doesn't have any html in it) and a completely blank page is rendered (no source code at all). Do I need to include application .js in my indexforms.php template? Where would I do this? Also, if you look at my jquery, I am loading the forms right after the DOM is ready - but on form submission...the forms are supposed to be removed - and the login_success.php should be loaded.
UPDATE
checklogin.php
<?php
session_start();
$host="localhost"; // Host name
$username="xxx"; // Mysql username
$password="xxx"; // 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();
}
?>
UPDATE
I don't think my javascript file is being loaded. I put alert("here") before e.preventDefault and nothing happens...is the second line of my application.js file messing things up? Why is it not getting loaded?
I found this here - does this help anyone?
JavaScript files loaded using the script tag are blocking by nature. Everything that’s happening or loading on the page is halted while the script is downloaded and executed. And remember that this applies to each script tag. Some modern browsers may let you download these in parallel, but the rest of the page is still blocked from doing anything meaningful
UPDATE
I put echo "success" inside the if block of checklogin.php...like this (at the bottom):
...
if($numRows === 1){
$_SESSION['username'] = $myusername;
echo "success";
}
else {
echo "Wrong Username or Password";
session_destroy();
}
?>
and it never gets there. If I put it just before the if statement it displays the echo message...which means that the user isnt being found in my database...or something like that?
UPDATE
Put var_dump($numRows) after $numRows = $sql->num_rows; like this:
...
$numRows = $sql->num_rows;
var_dump($numRows);
if($numRows === 1){
$_SESSION['username'] = $myusername;
}
...
I get int(1) as response...
UPDATE
Change the if condition in checklogin.php:
if($numRows === "int(1)"){
$_SESSION['username'] = $myusername;
}
else {
echo "Wrong Username or Password";
session_destroy();
}
The else block gets executed and I see "Wrong Username or Password" - as I should.
UPDATE
Changed jquery code to this...still no luck:
$(document).ready(function() {
$("#main").load("templates/indexforms.php", function () {
$("#login").submit(function(e) {
e.preventDefault();
$.post("checklogin.php", $(this).serialize(), function() {
$("#main").load("templates/login_success.php");
$("#login").remove();
$("#register").remove();
});
});
});
});
CORRECTION
The above code is correct! I just needed to restart the server! Thanks!
UPDATE
Found a new problem, here you go: simple login system spa/php/mysql/jquery
Try changing the JavaScript to this:
$(document).ready(function()
{
$("#main").load("templates/indexforms.php", function ()
{
$("#login").submit(function(e)
{
e.preventDefault();
$.post("checklogin.php", $(this).serialize(), function()
{
$("#main").load("templates/login_success.php");
$("#login").remove();
$("#register").remove();
});
}
)
}
)
}
)
Notice that the script waits until indexforms.php is loaded in #main before adding the submit event to #login (at the moment it's trying to do it (pretty much) at the same time so $("#login").submit(... is run before there is any #login element).
这篇关于SPA登录系统的起点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
