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]);
    }
}

在boostrap模式中通过Ajax检查并提交表单

1 个答案: