0

我试图了解如何将 JQuery 与 PHP 和 MySQL 一起使用。我在网上找到了这段代码，但它对我不起作用。该代码应该是一个简单的登录屏幕，它使用 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);
});

如您所见，您#在尝试使用myform表单内的类型输入访问 DOM 对象时忘记了一个。因此，要修复它，请将这样的脚本修改$("myForm :input")为$("#myForm :input"). 您不必进行我之前建议的任何更改。我认为这是一个不注意的问题。

编辑：

哦，顺便说一句，你永远不会把这个输出放到你的 HTML 中：

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

发生这种情况是因为您仅在表单字段不为空时才发送 AJAX 请求。我建议只在 PHP 中验证表单，因为不需要在 javascript 和 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

按下登录按钮将触发 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 回答
0

不久前我发现了这个代码片段的问题并忘记了这篇文章。所以我想我会发布修复程序。

很显然，

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

并没有像我最初想象的那样从表单中获取用户输入。

我通过抓取表单值来修复，

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

然后将它们作为参数传递给 jQuery.post方法中的 PHP 脚本。我也放了网址而不是

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

所以最终的结果看起来像这样，

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

之后一切正常。

于 2013-06-13T03:17:50.263 回答