在引导模式中通过 Ajax 检查和提交表单

Question

我在 boostrap 的模态窗口中有一个登录表单

<form method="post" id="loginForm" action="index.php">
  <label for="email">Email:</label>
  <input class="form-control" type="text" name="email" value="" id="emailLogin"/><br/>

  <label for="password">Password:</label>
  <input class="form-control" type="password" name="password" value="" id="passwordLogin"/><br/>
  <div id="loginAlert" class="alert alert-danger" role="alert">Email or password incorrect</div> <!-- Hidden by default -->

  <button type="submit" name="login" class="btn btn-primary" id="loginButton">Login</button>
  <script src="checkLoginForm.js"></script></form>

我想在提交之前检查此表格（如果电子邮件和密码正确）。如果检查电子邮件和密码的函数返回 1，则说明有错误。在这种情况下不应该提交表单，它应该只是让警报可见。 如果一切都正确，它应该提交。

事情是：如果电子邮件和密码不正确，我可以阻止表单提交，但如果它们正确，我无法提交。这是来自checkLoginForm.js的代码

$(document).ready(function() {
    $("#loginForm").submit(function(event) {
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'include/ajax.php?action=checkLogin',
            data: {
                email: $("#emailLogin").val(),
                password: $("#passwordLogin").val(),
            },
            success: function(result) {
                console.log(result);
                if(result == 0) {

                } else {
                    $("#loginAlert").css({"display": "block"});
                }
            }
        });
    });
});

当结果 == 0 时，我不知道该怎么做。如果我执行 $("loginForm").submit();，则不会提交表单（其他部分确实有效）。

感谢您的回复。

Answer 1

我建议您使用简单的$.post，这是使用$.ajax 进行POST 请求的一种简写方式。只需检查您的 php 文件中提供的值是否正确，如果它们正确则处理该数据并返回 true 或将用户重定向到另一个页面，否则返回 false。

 $(document).ready(function() {
    $("#loginButton").on('click', function (e){
        e.preventDefault();
        var email = $("#emailLogin").val();
        var passwd = $("#passwordLogin").val();
        $.post('include/ajax.php?action=checkLogin', {email: email, password: passwd}, function (data) {
            var res = $.parseJSON(data);
            if (res.result == true) {
                //you can redirect the or display a message to the user.
                //redirect the user to another page
                //$("#loginAlert").css({"display": "block"}).html("login successful");
            }else {
                $("#loginAlert").css({"display": "block"});
            }
        });
    });
  });

然后在你的 php 文件中

if (isset($_GET['action']) && $_GET['action'] == 'checkLogin') {
    $passwd = trim(filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING));
    $email = trim(filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL));
    //validate inputs here
    //get data from db
    //then compare values
    //if values match return true
    //$db_mail and $db_passwd are from the db.
    if ($email == $db_mail && $passwd == $db_passwd) {
        //if the provided information is correct
        //process it here, login the user.
        //redirect if necessary.
        // or return results to JS 
        echo json_encode(['result' => true]);
    } else {
        //if the information is wrong return false to JS
        //and alert the user
        echo json_encode(['result' => false]);
    }
}