Cara menggunakan php+AJAx+json untuk melaksanakan pengesahan log masuk-masalah PHP-php.cn

Cara menggunakan php+AJAx+json untuk melaksanakan pengesahan log masuk

PHPz

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

asal

1768 orang telah melayarinya

Dengan pembangunan WEB2.0 dan AJAX, semakin banyak tapak menggunakan teknologi AJAX untuk memuatkan beberapa halaman secara tidak segerak. Sebagai bahasa pembangunan web yang popular, PHP boleh mencapai beberapa kesan hebat apabila digabungkan dengan AJAX. Artikel ini akan memperkenalkan cara menggunakan AJAX dan JSON untuk melaksanakan fungsi pengesahan log masuk asas.

Mula-mula kita perlu menyediakan fail berikut: index.html, login.php, user.json. Antaranya, index.html ialah laman utama laman web, login.php digunakan untuk memproses permintaan log masuk, dan user.json digunakan untuk menyimpan maklumat pengguna.

1. Reka bentuk index.html

Dalam index.html kita perlu mereka bentuk borang log masuk, yang terdiri daripada dua medan: nama pengguna dan kata laluan. Untuk memudahkan panggilan AJAX, anda boleh menambah atribut id pada borang.

<!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>

Salin selepas log masuk

2. Penulisan log masuk.php

log masuk.php digunakan terutamanya untuk memproses permintaan log masuk. Permintaan log masuk perlu menentukan sama ada nama pengguna dan kata laluan adalah betul. Jika ia betul, rentetan dalam format JSON akan dikembalikan untuk menunjukkan log masuk yang berjaya.

<?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);

Salin selepas log masuk

3. Penulisan user.json

user.json menyimpan maklumat nama pengguna dan kata laluan. Fail ini boleh dijana dalam pelbagai cara, seperti ditulis secara manual, dieksport daripada pangkalan data, dsb.

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

Salin selepas log masuk

4. Penulisan login.js

login.js digunakan terutamanya untuk memproses permintaan penyerahan borang log masuk dan menghantar data borang untuk log masuk melalui AJAX .php, hasil log masuk dikembalikan ke halaman melalui fungsi panggil balik.

$(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');
                }
            }
        });
    });
});

Salin selepas log masuk

Dalam kod di atas, mula-mula kita mendapat ID butang log masuk melalui pemilih jQuery, dan kemudian memanggil kaedah AJAX dalam acara klik. Dalam kaedah AJAX, kami mentakrifkan jenis permintaan dan alamat, serta data yang akan dihantar ke login.php, dan menentukan jenis data sebagai JSON.

Dalam fungsi panggil balik, kami melakukan operasi logik berdasarkan data yang dikembalikan. Jika log masuk berjaya, mesej kejayaan dipaparkan, jika tidak, mesej kegagalan dipaparkan.

Pada ketika ini, fungsi pengesahan log masuk asas telah dilaksanakan. Melalui kerjasama AJAX dan JSON, kami boleh mencapai model pembangunan Web yang lebih cekap, menjadikan pengalaman pengguna lebih lancar dan pembangun lebih cekap.

Atas ialah kandungan terperinci Cara menggunakan php+AJAx+json untuk melaksanakan pengesahan log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!