1

php/mysql/jquery を使用して単純なログイン システムを実装しようとしています。単一ページのアプリにしたいので、「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のためにこれを持っています:

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="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>

現在、ログインしようとすると、スタックしlocalhost/~Eamon/checklogin.php(html が含まれていない)、完全に空白のページがレンダリングされます (ソースコードはまったくありません)。indexforms.php テンプレートにアプリケーション .js を含める必要がありますか? どこでこれをしますか?また、私のjqueryを見ると、DOMの準備ができた直後にフォームをロードしていますが、フォームの送信時に...フォームは削除されるはずです-login_success.phpをロードする必要があります。

アップデート

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

アップデート

JavaScript ファイルが読み込まれていないと思います。alert("here")e.preventDefault の前に置いても何も起こりません...私の application.js ファイルの 2 行目で問題が発生していますか? ロードされないのはなぜですか?

私はこれをここで見つけました - これは誰かを助けますか?

script タグを使用して読み込まれた JavaScript ファイルは、本質的にブロックされます。スクリプトがダウンロードされて実行されている間、ページで発生または読み込み中のすべての処理が停止します。そして、これは各スクリプト タグに適用されることに注意してください。一部の最新のブラウザーでは、これらを並行してダウンロードできる場合がありますが、ページの残りの部分は依然として意味のあることをブロックされています

アップデート

echo "success"はchecklogin.phpのifブロックの中に入れました...このように(一番下に):

...

if($numRows === 1){
    $_SESSION['username'] = $myusername;
    echo "success";
}
else {
    echo "Wrong Username or Password";
    session_destroy();
}
?>

そして、それは決してそこに到達しません。if ステートメントの直前に置くと、エコー メッセージが表示されます。これは、ユーザーがデータベースで見つからないことを意味します...またはそのようなものですか?

アップデート

var_dump($numRows)このように置き$numRows = $sql->num_rows;ます:

...

$numRows = $sql->num_rows;
var_dump($numRows);

if($numRows === 1){
    $_SESSION['username'] = $myusername;
}
...

応答として int(1) を取得します...

アップデート

checklogin.php の if 条件を変更します。

if($numRows === "int(1)"){
    $_SESSION['username'] = $myusername;
}
else {
    echo "Wrong Username or Password";
    session_destroy();
}

else ブロックが実行され、「間違ったユーザー名またはパスワード」が表示されます。

アップデート

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");
                $("#login").remove();
                $("#register").remove();
            });
        });
    });
});

修正

上記のコードは正しいです!サーバーを再起動する必要がありました。ありがとう!

アップデート

新たな問題が見つかりました。簡単なログイン システム spa/php/mysql/jqueryをご覧ください。

4

1 に答える 1

1

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

    }
    )

  }
  )

}
)

スクリプトは、submit イベントを追加する前にindexforms.phpロードされるまで待機することに注意してください(現時点では、(ほとんど) 同時にそれを実行しようとしているため、要素が存在する前に実行されます)。#main#login$("#login").submit(...#login

于 2013-06-17T21:44:23.833 に答える