php - 带有php html css jquery mysqli的ajax登录表单

问题描述

我正在创建一个登录页面，用户可以在其中使用姓名和电子邮件 ID 登录他们的帐户。当我尝试使用正确的电子邮件 ID 输入详细信息并将其命名为未登录时，我在登录页面中遇到了问题。

我是ajax的新手。我应该怎么做才能让它工作？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="script.js"></script>
    <style>
        .error {
            color: red;
            display: none;
        }

        .div1 {
            margin-top: -19px;
            margin-bottom: -25px;
            margin-left: -19px;
        }

        .copy {
            border-radius: 4px;
            padding: 6px 20px;
            border-style: ridge;
        }

        #error_message {
            background: #F3A6A6;
        }

        .ajax_response {
            padding: 10px 20px;
            border: 0;
            display: inline-block;
            margin-top: 20px;
            cursor: pointer;
            display: none;
            color: #555;
        }
    </style>
</head>
<body style="background-image: url(pic.jpg); background-repeat: no-repeat; background-size: cover;">

<div style="padding-left: 380px; padding-top:80px" class="div1">

    <h2 style="color:#009999">Registration Form :</h2>

    <p><span class="error">All fields are required </span></p>

    <form action="" method="post" id="logForm" enctype="multipart/form-data">

        <span style="color:#0099ff">Name: </span>
        <input type="text" name="name" id="name" class="copy" style="margin-left: 52px" value=""/>
        <span class="namee error">Enter name</span>
        <br/><br/>

        <span style="color:#0099ff"> E-mail: </span>
        <input type="text" name="email" id="email" class="copy" style="margin-left: 48px" value=""/>
        <span class="emaile error">Enter email</span>
        <br/><br/>

        <input type="button" id="submit" class="submit" name="submit" value="Register"/>

        <div id="error_message" class="ajax_response" style="float:left"></div>

    </form>

</div>

</body>

<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            var error = false;
            var form = document.getElementById('logForm');
            var formData = new FormData(form);

            // Loop through the form data
            for (var p of formData) {
                // Check if the form data is empty
                if (p[1] === '') {
                    // Show the error
                    $('.' + p[0] + 'e').show();
                    error = true;
                }
            }

            // Boolean to prevent AJAX from running in case of an error
            if (error) {
                return false;
            }

            // AJAX Code To Submit Form.
            $.ajax({
                type: "POST",
                url: "success.php",
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    if (data['success']) {
                        window.location = 'pannel.php';
                    }
                    else {
                        alert('Invalid Credentials');
                    }

                }

            });

        });
    });
</script>

</html>

成功.php

<?php
$mysqli  = mysqli_connect("localhost","root","","ajax1");

$name=$_POST["name"];
$email=$_POST["email"];

//Checking is user existing in the database or not
$query = "SELECT * FROM `users` WHERE name='$name' and email='$email'";
$result = mysqli_query($mysqli,$query);
$row1 = mysqli_fetch_array($result);
$rows = mysqli_num_rows($result);

if($rows==1){
    $_SESSION['name'] = $name;
    $_SESSION['id']=$row1['userid'];
    // Redirect user to index.php
    header("Location: pannel.php");
}
else{
    $error = " Invalid Name or E-MAIL ";
}
?>

面板.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        #success_message{
            background: #CCF5CC;
        }

        .ajax_response {
            padding: 10px 20px;
            border: 0;
            display: inline-block;
            margin-top: 20px;
            cursor: pointer;
            display:none;
            color:#555;
        }
    </style>
</head>
<body>

<div id="success_message" class="ajax_response" style="float:left"></div>

<div class="container">
    <br><br><br><br>
    <?php

    $mysqli  = mysqli_connect("localhost","root","","ajax1");
    $query=mysqli_query($mysqli,"select * from `users` where userid='".$_SESSION['id']."'");
    $row=mysqli_fetch_array($query);
    echo 'Welcome - '.$row['name'];

    ?>
    <br>
    <a href="logout.php">Logout</a>
    <br><br>
</div>
</body>
</html>

标签： phphtmlajaxmysqli

php - 带有php html css jquery mysqli的ajax登录表单

问题描述

解决方案

推荐阅读