Question

我试图了解如何在PHP和MySQL中使用JQuery。我在网上找到了这个代码，但它对我不起作用。该代码应该是一个简单的登录屏幕，它使用JQuery向用户输出消息，而无需重定向页面。我已经单独检查了一切（数据库，文件，文件名等），一切正常。如果我删除：

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

从脚本

，登录工作，但它重定向到实际的PHP页面，这是我不想要的。我希望PHP文件的输出语句在html页面上弹出而不重定向。如果我保留代码的那一部分，当我单击提交按钮时（填充字段时）没有任何反应。如果我没有输入任何内容，我会收到消息：“请输入用户名和密码。”如代码所示，所以我知道JQuery正在工作。但是无论何时输入信息，提交时都不会发生任何事情。我认为这个问题与以下内容有关：

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

<。> $ .post函数的参数。我在整个脚本中放置了警报，并且未执行该函数中的警报。谁能告诉我发生了什么事？

HTML code：

<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";
    }

?>

Answer 1

按下登录按钮将同时触发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>

Answer 2

尝试对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请求。我建议只在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;
    });
});

Answer 3

我前一段时间发现了这段代码的问题而忘记了这篇文章。所以我以为我会发布修复程序。

显然，

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

事后一切都很好。

为什么这个jquery代码没有正确执行？

3 个答案: