jQuery AJAX PHP 登录表单 - jQuery AJAX PHP login form

>我正在尝试为Web应用程序制作登录表单。

我的登录表单

<form class="col s12" method="post" action="#">
    <div class="row">
        <div class="input-field col s12">
            <input id="username" type="text" name="name" required>
            <label for="username">Username</label>
        </div>
    </div>
        <div class="row">
            <div class="input-field col s12">
                 <input id="password" type="password" name="pas" required>
                 <label for="password">Password</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="error"></div>
        <div class="card-action">
            <button class="btn waves-effect waves-light" id="loginBtn" type="submit" value="Log In">Submit
                <i class="mdi-content-send right"></i>
            </button>
        </div>
    </div>
</form>

按钮单击脚本

<script>
    $(document).ready(function() {
        $('#loginBtn').click(function() {
            var username=$("#username").val();
            var password=$("#password").val();
            var dataString = 'username='+username+'&password='+password;
            if($.trim(username).length>0 && $.trim(password).length>0) {
                $.ajax({
                    type: "POST",
                    url: "login.php",
                    data: dataString,
                    cache: false,
                    beforeSend: function(){ $("#loginBtn").val('Connecting...');},
                    success: function(data){
                        if(data) {
                            window.location.href = "application.php";
                        } else {
                            $('#loginCard').shake();    //Shake animation effect.
                            $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. ");
                        }
                    }
                });
            }
            return false;
        });
    });
</script>

登录.php

<?php
    include("db.php");
    session_start();
    if(isset($_POST['username']) && isset($_POST['password'])) {
        $username=mysqli_real_escape_string($db,$_POST['username']);
        $password=msqli_real_escape_string($db,$_POST['password']);
        $result=mysqli_query($db,"SELECT uname FROM users WHERE uname='$username' and pass='$password'");
        $count=msqli_num_rows($result);
        $row=mysqli_fetch_array($result,MYSQLI_ASSOC);
        if($count==1) {
            $_SESSION['login_user']=$row['uname'];
            echo $row['uname']
        }
    }
?>

每当我单击提交按钮时，它都会通过 POST 方法重定向到同一页面(索引.php(。在 chrome 开发者工具中，提交的数据永远不会发送到登录.php，我无法理解导致此问题的原因。任何帮助将不胜感激。

你必须改变

<form class="col s12" method="post" action="#">

自

<form id="loginForm" class="col s12" method="post" action="#">

而不是：

$('#loginBtn').click(function() {

您应该具备：

$('#loginForm').submit(function(e){
    e.preventDefault();
    // Rest of the code here
});

或者，如果上述方法不起作用，您可以尝试以下方法：

$('#loginForm').submit(function(e){
    // call a function for the ajax job
    return false;
});

 <script>
    $(document).ready(function () {
        $("#login").submit(function (e)
        {   
            var firstForm = $("#login").serialize();
            $.ajax({
                url: "login.php",
                type: 'POST',
                data: firstForm,
                mimeType: "multipart/form-data",
                //contentType: false,
                cache: false,
                processData: false,
                success: function (data)
                {                     
                    if ($.trim(data) === '1') {
                       window.location.href = 'display.php';                                 
                    }
                    else {
                        $('#msgbox').html('Invalid Email id or password.');
                        $('#msgbox').addClass("success").css("color", "red").fadeIn();
                        $('#msgbox').addClass("success").css("font-size", "15px");
                    }
                }
            });
            e.preventDefault();
        });
    });
</script>

我倾向于认为出现问题是因为默认情况下，通过 ajax 的调用是 xxxx(这意味着进程的其余部分继续并且不等待服务器的响应(。您应该使用："async： false"作为调用 ajax：的附加参数：

$.ajax({
            url: "login.php",
            type: 'POST',
            data: firstForm,
            mimeType: "multipart/form-data",
            //contentType: false,
            async: false,
            cache: false,
            processData: false,
            success: function (data)