0

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();
}
?>

上記のスクリプトは、誰かがこのフォームを使用してログインすると実行されます。

テンプレート/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>

上記のテンプレートは index.php (下記) に読み込まれます。jqueryを使用してすべてが「メイン」divにロードおよびアンロードされるように、SPAを作成しようとしています。

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>

要素をロードおよびアンロードする jquery/ajax コードは次のとおりです。

js/application.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」をロードします。

テンプレート/logout.php

<?php
session_start();
session_destroy();
?>

<div id="loginlinkdiv" >
    <h2>You have been logged out.</h2>
    <a href = "#">Log in</a>
</div>

上記のテンプレートの「ログイン」リンクをクリックすると、indexforms.php テンプレートが読み込まれます (上記)。その後、再度ログインを試みます。checklogin.php スクリプトが実行され、「string(4) "obey"」が表示されます。var_dump()checklogin.php の if ブロックでユーザー名 (従う) を指定したため、これは理にかなっています。ただし、login_success.php ページがロードされないため、jquery が実行されないようです。「index.php」をリロードして再度ログインすると...動作します - 基本的に、プログラムの流れがこのように動作する理由がわかりません。

アップデート

これは、[NET] タブの下の firebug コンソールに表示されるものです。2 回目にログインするまで、大量のリクエストが積み重なっていきます。その後、リクエストはクリアされます...残りのリクエストは1つだけです:

インデックス ページを読み込むと、次のように表示されます。

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
4

1 に答える 1