Ajax/jQuery登录表单失败

Question

我已经查看了一千遍，但仍然不明白为什么它不能工作。

这是一个简单的ajax登录表单。即使凭证正确，它也返回false。（我通过直接提交到 ajax_login.php 进行了测试）

Ajax函数：

$(document).ready(function() {
$("#submit_login").click(function() {


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

    $.ajax({

        type: "POST",
        url: "scripts/ajax_login.php",
        data: "username=" + username + "&password=" + password,
        success: function(result) {
            if(result == '0')
            {
                $(document.location = 'index.php?    page=profile&user=' + username);
            }
            else
            {
                $("#login_error").show("fast");
            }
        }
    });         
    return false;
});
});

ajax_login.php

session_start();
require('../conf/config.php');

if($_POST)
{

$u = mysql_real_escape_string($_REQUEST['username']);
$p = md5(mysql_real_escape_string($_REQUEST['password']));

$con = mysql_connect($mysql_server,$mysql_user,$mysql_password);
$db = mysql_select_db($mysql_db);

$query = mysql_query("SELECT * FROM users WHERE username = '$u' AND password = '$p'");

if(mysql_num_rows($query) > 0)
{
    $sid = session_id();
    $query = "UPDATE users SET sid='$sid' WHERE username='$u'";
    $result = mysql_query($query);

    if($result)
    {
        $_SESSION['loggedin'] = $u;
        echo '0';
    }
}
}

表单：

<div class="login_form">
<form action="scripts/ajax_login.php" method="POST">
Login<br /><br />
Username: <br />
<input type="text" name="username" id="username" /> <br />
Password: <br />
<input type="password" name="password" id="password" />
</div>
<input type="checkbox" name="remember" id="rem" value="checked"/><label for="rem">Stay logged in?</label><br />
<?php $formKey->outputKey(); ?>
    <input type="submit" value="Login!" name="submit" id="submit_login" />
   </form>

- BrantWladichuk

---

尝试将“return false”移动到成功函数的else块中。另外，你的“document.location”语法正确吗？ - DG3

如果这些是你实际代码的片段，那么它容易受到 SQL 注入攻击（在某些情况下：https://dev59.com/anM_5IYBdhLWcg3wzmkw）。 - dezso

如果 @SimpleCoder 的回答是正确的，请务必通过点击复选框将其标记为正确 - 感谢人们并给予他们应有的荣誉 :) - Mattygabe

如果提供的答案之一不起作用，或者回答者做出的假设是不正确的，那么获取答案的唯一方法就是提供反馈并编辑您的答案。或者接受正确的答案。 - Mattygabe

Answer 1

由于$.ajax()（以及其他jQuery ajax方法）默认情况下是异步操作，因此它始终会返回false。您需要在回调函数（例如您的success回调函数）中进行所有事件处理。

另外，我建议不要使用：if (result == '0')。而是使用===。

理想情况下，您应该返回JSON或至少不是true、false、0、1等内容。当涉及到JavaScript的布尔值处理时，这四个值（以及其他值）很容易混淆。

- Chris Laplante

---

如果您需要点击处理程序返回 false，则必须按照 @SimpleCoder 建议的设置 async AJAX 选项为 false，这将使 AJAX 调用同步，并等待 success 或 error 被调用。非 Firefox 浏览器将会 "挂起"，因此如果您有任何类型的加载图形，它不会很好地工作。因此，如果您不需要请求是 synchronous，那么当请求返回时，只需让您的成功和错误处理程序完成它们的工作即可。 - Mattygabe

Answer 2

除了 return 语句在回调函数 (success 和 error) 被调用之前执行，而且似乎没有任何事情处理 $("#submit_login") 的点击处理函数的返回值之外，可能正在发生的是，尽管您正在 click 事件上进行 AJAX 调用，但浏览器也会提交表单，因为 #submit_login 是一个 submit 类型的按钮 - 无论是否执行 AJAX 调用，页面都会在表单提交时重新加载 (所以看起来好像 click 处理程序返回了 false 而不是触发了您的 success 处理程序)。将其更改为非提交类型按钮：

<input type="button" value="Login!" name="submit" id="submit_login" />

还有其他的方法可以做到这一点，比如在你的处理程序中使用Javascript的preventDefault，像这样：

$("#submit_login").click(function(ev) {
    ev.preventDefault();
    //Rest of code...

就像我之前所说的那样，似乎这里根本没有使用返回值，因此您真的不需要它返回 false。任何需要完成的工作都可以放在 success/error 处理程序中。

- Mattygabe

Answer 3

没有测试过，但你应该尝试一下：

$.ajax({
    type: "POST",
    url: "scripts/ajax_login.php",
    data: {"username":username, "password":password},
    success: function(result) {
        if(result==='0')
        {
            $(document.location = 'index.php?page=profile&user='+username);
        }
        else
        {
            $("#login_error").show("fast");
            return false;
        }
    }
});

- Sunil Kumar