0

PHP と MySQL で JQuery を使用する方法を理解しようとしています。このコードをオンラインで見つけましたが、うまくいきません。このコードは、ページをリダイレクトせずに JQuery を使用してユーザーにメッセージを出力する単純なログイン画面であると想定されています。すべて (データベース、ファイル、ファイル名など) を個別に確認しましたが、すべて正常に動作しています。私が削除した場合：

"$("#myForm").submit( function() {
        return false;
});"

スクリプトから、ログインは機能しますが、実際の PHP ページにリダイレクトされますが、これは望ましくありません。PHP ファイルの出力ステートメントを、リダイレクトせずに html ページにポップアップ表示したい。コードのその部分をそのままにしておくと、送信ボタンをクリックしても何も起こりません (フィールドにデータが入力されているとき)。何も入力しないと、「ユーザー名とパスワードの両方を入力してください」というメッセージが表示されます。コードに示されているように、JQueryが機能していることがわかります。ただし、情報が入力されるたびに、送信時に何も起こりません。この問題は次のことと関係があると思います。

function(data) {
    $("div#ack").html(data);
});

$.post 関数のパラメーター。スクリプト全体にアラートを配置しましたが、その関数に配置されたアラートは実行されませんでした。誰が何が起こっているのか教えてもらえますか?

HTML コード:

<html>
<head><title>Login Form: JQuery + PHP + AJAX</title></head>
<body>

     <form id="myForm" action="http://localhost/login.php" method="POST">
         username: <input type="text" name="username" id="username"/><br />
         password: <input type="password" name="password" id="password"/><br />
         <button id="submit">Login</button>
     </form>

     <div id="ack"></div>

     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
     <script type="text/javascript" src=my_script.js"></script>
</body>
</html>

JQuery コード (my_script.js):

$("button#submit").click( function() {

    if( $("#username").val() == "" || $("#password").val() == "" )
        $("div#ack").html("Please enter both username and password.");
    else
        $.post( $("#myForm").attr("action"),
        $("myForm :input").serializeArray(),
        function(data) {
            $("div#ack").html(data);
        });

    $("#myForm").submit( function() {
        return false;
    });
});

PHP コード (login.php):

<?php

    mysql_connect('localhost','root','pass');
    mysql_select_db('people');

    $username = mysql_real_escape_string($_POST["username"] );
    $password = mysql_real_escape_string($_POST["password"] );

    if( empty($username) || empty($password) )
        echo "Username and Password Mandatory - from PHP";
    else {
        $sql = "SELECT count(*) FROM users WHERE(username='$username' AND password='$password')";
        $res = mysql_query($sql);
        $row = mysql_fetch_array($res);

        if($row[0] > 0)
            echo "Login Successful";
        else
            echo "Login Failed";
    }

?>
4

3 に答える 3

0

変数に対してを実行してみてprint_r($_POST)ください。$_POST空の配列があることがわかります。あなたの問題はまだあなたのスクリプトにあります：

$.post( "http://localhost/login.php",
   $("myForm :input").serializeArray(),
    function(data) {
        $("div#ack").html(data);
});

ご覧のとおり#、フォーム内で型入力を使用してDOMオブジェクトにアクセスしようとしたときに忘れてしまいましたmyform。したがって、これを修正するには、このようなスクリプトをに変更し$("myForm :input")ます$("#myForm :input")。以前に提案した変更を加える必要はありません。気にしないのが問題だと思います。

編集：

ちなみに、この出力をHTMLに取り込むことは決してありません。

if( empty($username) || empty($password) )
    echo "Username and Password Mandatory - from PHP";

これは、フォームフィールドが空でない場合にのみAJAXリクエストを送信するために発生します。JavaScript内およびPHP内でフォームを検証する必要がないため、PHP内でのみフォームを検証することをお勧めします。コードは次のようになります。

$("button#submit").click( function() {
    $.post( $("#myForm").attr("action"),
    $("#myForm :input").serializeArray(),
    function(data) {
        $("div#ack").html(data);
    });

    $("#myForm").submit( function() {
        return false;
    });
});
于 2013-03-20T10:53:46.177 に答える
0

少し前にこのコード スニペットの問題を発見し、この投稿のことを忘れていました。だから私は修正を投稿すると思った。

どうやら、

$("myForm :input").serializeArray()

最初に考えていたように、フォームからユーザー入力を取得していませんでした。

フォームの値を取得して修正しましたが、

var uname = $("#username").val();
var passwd = $("#password").val();

そして、それらを jQuery.postメソッドで PHP スクリプトのパラメーターとして渡します。の代わりにURLも入れます

$.post( $("#myForm").attr("action")

最終的な結果は次のようになりました。

$.post("someURL/myfile.php", {username: uname, password: passwd}, function(data) { 
    $("div#ack").html(data);
});

その後、すべてがうまくいきました。

于 2013-06-13T03:17:50.263 に答える
0

ログインボタンを押すと、javascript と login.php の両方がトリガーされます。あなたの場合、次のコードでフォームアクションをブロックするため、javascript コードのみがトリガーされます。

$("#myForm").submit( function() {
    return false;
});

PHPを直接呼び出す必要がないため、フォームアクションは必要ありません。AJAX 経由で呼び出し、javascript 内で値を返します。ここで $.post のドキュメントを確認できます: http://api.jquery.com/jQuery.post/。したがって、送信ボタンの onclick イベント関数は完全に間違っています。

コードを書き直す方法は次のとおりです。

1) onclick イベントを変更します。

$("button#submit").click( function() {

    if( $("#username").val() == "" || $("#password").val() == "" )
        $("div#ack").html("Please enter both username and password.");
    else
        $.post( "http://localhost/login.php",
        $("myForm :input").serializeArray(),
        function(data) {
            $("div#ack").html(data);
        });
});

2) 次のようにフォーム アクションを削除します。

<form id="myForm">
    username: <input type="text" name="username" id="username"/><br />
    password: <input type="password" name="password" id="password"/><br />
    <button id="submit">Login</button>
</form>
于 2013-03-20T02:58:23.623 に答える