javascript - 使用触发 javascript 验证的 POST 表单和 AJAX 到 PHP 文件登录。将数据存储到 PHP 时出现问题

Question

简介

我现在停留在 AJAX 的一部分，因为我现在知道如何从 AJAX 部分提取数据并将其放入 PHP 变量中，以便我可以访问它并在以后使用它。它也不会将我重定向到另一个页面(“Map.php”)。

我试着在网上寻找答案，但无济于事。有经验的可以帮忙看看吗。另外，我不确定我的做法是否正确，请告诉我我哪里做错了。

详情

我想做一个“Login.php”，它将使用一个表单从用户那里获取电子邮件和密码。表单上将有一个“登录”按钮，该按钮将触发 javascript 以进行验证。

验证后，我将使用 AJAX 调用另一个名为“Auth.php”的 php 文件，该文件将与 MySQL 数据库建立连接，以搜索该特定用户验证用户。

然后“Auth.php”将返回用户详细信息的 json 数据，我打算在“Login.php”页面中使用它，并开始与 $_SESSION[] php 的变量。我还希望页面在成功登录后将用户重定向到另一个页面(“Map.php”)。

下面是我在“Login.php”和“Auth.php”中的部分代码。

登录.php

<form name="myForm" action="Map.php" method="post" onsubmit="return validateForm()">
    <fieldset>
        <div class="form-group">
            <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus value="<?php echo isset($_POST["email"])? $_POST["email"]: ""; ?>">
        </div>
        <div class="form-group">
            <input class="form-control" placeholder="Password" name="password" type="password" value="<?php echo isset($_POST["password"])? $_POST["password"]: ""; ?>">
        </div>
        <input type="submit" value="Login" class="btn btn-lg btn-success btn-block"/>
    </fieldset>
</form>

<script>
function validateForm() {
    //event.preventDefault();
    var email = document.forms["myForm"]["email"].value;
    var password = document.forms["myForm"]["password"].value;
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (email == null || email == "") {
        alert("Email must be filled.");
        return false;
    }

    if (password == null || password == "") {
        alert("Password must be filled.");
        return false;
    }

    if(re.test(email)) {
        var data = {
            "email": email,
            "password": password
        };
        data = $(this).serialize() + "&" + $.param(data);
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "auth.php", 
            data: data,
            success: function(data) {
                alert("You have successfully logged in!");
                // TODO store user details in session
                return true; // return true to form, so will proceed to "Map.php"
            }
        });
        return false;
    }
    else {
        alert("You have entered an invalid email address!");
        return false;
    }
    return false;
}
</script>

Auth.php

$connection = mysqli_connect("localhost", "root", "", "bluesky");

// Test if connection succeeded
if(mysqli_connect_errno()) {
    die("Database connection failed: " . mysqli_connect_error() . " (" . mysqli_connect_errno() . ") " . 
    "<br>Please retry your last action. Please retry your last action. " . 
    "<br>If problem persist, please follow strictly to the instruction manual and restart the system.");
}

$valid=true;

if (isset($_GET['email']) && isset($_GET['password'])) {
    $email = addslashes($_GET['email']);
    $password = addslashes($_GET['password']);
} else {
    $valid = false;
    $arr=array('success'=>0,'message'=>"No username or password!");
    echo json_encode($arr);
}

if($valid == true){
    $query = "SELECT * FROM user WHERE email='$email' and password='$password'";
    $result = mysqli_query($connection, $query);
    if(mysqli_num_rows($result) == 1){
        $row = mysqli_fetch_assoc($result);
        $arr=array('success'=>1,'type'=>$row['type'],'user_id'=>$row['id'],'email'=>$row['email'],'name'=>$row['name'],'phone'=>$row['phone'],'notification'=>$row['notification']);
        echo json_encode($arr);
    }else{
        $arr=array('success'=>0,'message'=>"Login failed");
        echo json_encode($arr);
    }
}

// close the connection that was established with MySQL for the SQL Query
mysqli_close($connection);

Answer 1

你的 ajax 调用应该是这样的:

data = $(this).serialize() + "&" + $.param(data)
$.post('auth.php', data, function(response){
  console.log(response);
});

您必须使用 post 方法，因为您要获取密码和电子邮件，所以这不是一个好的做法。对于验证，有许多 jQuery 插件。