javascript - 使用ajaxForm Jquery插件时返回PHP错误

Question

我正在尝试制作一个使用 ajaxForm 和验证插件的登录脚本，但如果 PHP 提供错误，它不知道。这是我的 JavaScript

$(function login() {
$("#login").validate({ // initialize the plugin
    // any other options,
    onkeyup: false,
    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true
        }
    }
});

$('form').ajaxForm({
    beforeSend: function() {
        return $("#login").valid();
    },
    success: function() {
        window.location="index.php";
    },
    error: function(e) {
        alert(e);
    }
});
});

请记住，我是 JS 新手，可能有更好的方法来做到这一点。我需要的是，如果提交表单但用户名或密码错误，我需要它不重定向，并给出错误警报，但这目前不起作用。我之前用谷歌搜索过这个，并在这里检查过，到目前为止什么也没找到。

编辑:使用下面的代码，它仍然不起作用:

JS

   $(function login() {
    $("#login").validate({ // initialize the plugin
        // any other options,
        onkeyup: false,
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true
            }
        }
    });

    $("#login").submit(function(e) {
        e.preventDefault();
            $.ajax({
                type : "POST",
                dataType : "json",
                cache : false,
                url : "/doLogin",
                data : $(this).serializeArray(),
                success : function(result) {
                    if(result.result == "success"){
                        window.location = "/index.php";
                    }else if(result.result == "failure"){
                        $("#alert").html("Test");
                    }
               },
                error : function() {
                    $("#failure").show();
                    $(".btn-load").button('reset');
                    $("#email").focus();
                }
            });
    });
    }); 

HTML

<div class="shadowbar">
<div id="alert"></div>
<form id="login" method="post" action="/doLogin">

<fieldset>

 <legend>Log In</legend>
<div class="input-group">
  <span class="input-group-addon">E-Mail</span>

  <input type="email" class="form-control" name="email" value="" /><br />
</div>
<div class="input-group">
  <span class="input-group-addon">Password</span>

  <input type="password" class="form-control" name="password" />
  </div>

</fieldset>

<input type="submit"  class="btn btn-primary" value="Log In" name="submit" />

</form></div>

PHP

public function login() {
    global $dbc, $layout;
    if(!isset($_SESSION['uid'])){
        if(isset($_POST['submit'])){
            $username = mysqli_real_escape_string($dbc, trim($_POST['email']));
            $password = mysqli_real_escape_string($dbc, trim($_POST['password']));
            if(!empty($username) && !empty($password)){
                $query = "SELECT uid, email, username, password, hash FROM users WHERE email = '$username' AND password = SHA('$password') AND activated = '1'";
                $data = mysqli_query($dbc, $query);
                if((mysqli_num_rows($data) === 1)){
                    $row = mysqli_fetch_array($data);
                    $_SESSION['uid'] = $row['uid'];
                    $_SESSION['username'] = $row['username'];
                    $_SERVER['REMOTE_ADDR'] = isset($_SERVER["HTTP_CF_CONNECTING_IP"]) ? $_SERVER["HTTP_CF_CONNECTING_IP"] : $_SERVER["REMOTE_ADDR"];
                    $ip = $_SERVER['REMOTE_ADDR'];
                    $user = $row['uid'];
                    $query = "UPDATE users SET ip = '$ip' WHERE uid = '$user' ";
                    mysqli_query($dbc, $query);
                    setcookie("ID", $row['uid'], time()+3600*24);
                    setcookie("IP", $ip, time()+3600*24);
                    setcookie("HASH", $row['hash'], time()+3600*24);
                    header('Location: /index.php');
                    exit();
                } else {
                    $error = '<div class="shadowbar">It seems we have run into a problem... Either your username or password are incorrect or you haven\'t activated your account yet.</div>' ;
                    return $error;
                    echo "{\"result\":\"failure\"}";
                }
            } else {
                $error = '<div class="shadowbar">You must enter both your username AND password.</div>';
                return $error;
                $err = "{\"result\":\"failure\"}";
                echo json_encode($err);
            }
            echo "{\"result\":\"success\"}";
        }
    } else {
        echo '{"result":"success"}';
        exit();
    }
    return $error;
}

Answer 1

在您的登录脚本中，您需要以 json 格式返回错误。

例如

在您的登录脚本中，如果您的查询在数据库中找到该用户的行，请回显:

echo "{\"result\":\"success\"}";

如果失败:

echo "{\"result\":\"failure\"}";

然后您可以在 JavaScript 中解析这些内容，如下所示:

$('form').ajaxForm({
    beforeSend: function() {
        return $("#login").valid();
    },
    success: function(result) {
    if(result.result == "success"){
        window.location = "index.php";
        }else if(result.result == "failure"){
            alert('Failure!');
            }
    error: function(e) {
    alert(e);
    }
}
});

这是我用来让用户登录我的网站的 Ajax 脚本的示例，如果需要，您可以使用它作为引用。这只是为了帮助您更广泛地理解我正在谈论的内容:

由于用户直观性等各种原因，我返回的不仅仅是成功和失败，但要点就在那里。

$("#loginForm").bind("submit", function() {
    $("#invalid").hide();
    $("#disabled").hide();
    $("#error").hide();
    $("#failure").hide();
    $("#blocked").hide();
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    if(email != "" && password != ""){
        $.ajax({
            type : "POST",
            dataType : "json",
            cache : false,
            url : "/ajax/functions/login",
            data : $(this).serializeArray(),
            success : function(result) {
                if(result.result == "success"){
                    window.location = "/account";
                }else if(result.result == "failure"){
                    $("#invalid").show();
                    $(".btn-load").button('reset');
                    $("#email").focus();
                }else if(result.result == "disabled"){
                    $("#disabled").show();
                    $(".btn-load").button('reset');
                    $("#email").focus();
                }else if(result.result == "blocked"){
                    $("#blocked").show();
                    $(".btn-load").button('reset');
                    $("#email").focus();
               }
           },
            error : function() {
                $("#failure").show();
                $(".btn-load").button('reset');
                $("#email").focus();
            }
        });
    }else{
        $("#error").show();
        $(".btn-load").button('reset');
        $("#email").focus();
    }
    return false;
});