How to use php+AJax+json to implement login verification-PHP Problem-php.cn

How to use php+AJax+json to implement login verification

PHPz

Release： 2023-03-18 07:02:02

Original

1770 people have browsed it

With the development of WEB2.0 and AJAX, more and more sites use AJAX technology to asynchronously load some pages. As a popular web development language, PHP can achieve some cool effects when combined with AJAX. This article will introduce how to use AJAX and JSON to implement basic login verification functions.

First we need to prepare the following files: index.html, login.php, user.json. Among them, index.html is the homepage of the website, login.php is used to process login requests, and user.json is used to store user information.

1. Design of index.html

In index.html we need to design a login form, which consists of two fields: username and password. To facilitate AJAX calls, you can add the id attribute to the form.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="login-form">
        <label>用户名：</label><input type="text" name="username"><br>
        <label>密   码：</label><input type="password" name="password"><br>
        <button type="button" id="login-btn">登录</button>
    </form>
    <div id="msg"></div>
    <script src="js/login.js"></script>
</body>
</html>

Copy after login

2. Writing of login.php

login.php is mainly used to process login requests. The login request needs to determine whether the username and password are correct. If they are correct, a string in JSON format will be returned to indicate successful login. Otherwise, a login failure message will be returned.

<?php
header(&#39;Content-Type: application/json&#39;);
$data = json_decode(file_get_contents(&#39;../data/user.json&#39;), true);
$username = $_POST[&#39;username&#39;];
$password = $_POST[&#39;password&#39;];
if ($username === $data[&#39;username&#39;] && $password === $data[&#39;password&#39;]) {
    $result = array(&#39;status&#39; => 1, 'msg' => '登录成功');
} else {
    $result = array('status' => 0, 'msg' => '用户名或密码错误');
}
echo json_encode($result);

Copy after login

3. Writing of user.json

user.json stores user name and password information. This file can be generated in various ways, such as manually written, exported from a database, etc.

{
    "username": "admin",
    "password": "123456"
}

Copy after login

4. Writing of login.js

login.js is mainly used to process the submission request of the login form and send the form data to login.php through AJAX. , the login result is returned to the page through the callback function.

$(function(){
    $('#login-btn').click(function(){
        $.ajax({
            type: 'POST',
            url: 'login.php',
            data: $('#login-form').serialize(),
            dataType: 'json',
            success: function (data) {
                if (data.status === 1) {
                    $('#msg').html(data.msg).css('color', 'green');
                } else {
                    $('#msg').html(data.msg).css('color', 'red');
                }
            }
        });
    });
});

Copy after login

In the above code, first we get the ID of the login button through the jQuery selector, and then call the AJAX method in the click event. In the AJAX method, we define the request type and address, as well as the data to be sent to login.php, and specify the data type as JSON.

In the callback function, we perform logical operations based on the returned data. If the login is successful, a success message is displayed, otherwise a failure message is displayed.

At this point, a basic login verification function has been implemented. Through the collaboration of AJAX and JSON, we can achieve a more efficient Web development model, making the user experience smoother and developers more efficient.

The above is the detailed content of How to use php+AJax+json to implement login verification. For more information, please follow other related articles on the PHP Chinese website!