Maison > Article > développement back-end > Comment utiliser php+AJax+json pour implémenter la vérification de connexion
Comment utiliser php+AJax+json pour implémenter la vérification de connexion
- PHPzoriginal
- 2023-03-17 20:35:531739parcourir
Avec le développement du WEB2.0 et d'AJAX, de plus en plus de sites utilisent la technologie AJAX pour charger certaines pages de manière asynchrone. En tant que langage de développement Web populaire, PHP peut obtenir des effets intéressants lorsqu'il est combiné avec AJAX. Cet article explique comment utiliser AJAX et JSON pour implémenter les fonctions de base de vérification de connexion.
Nous devons d'abord préparer les fichiers suivants : index.html, login.php, user.json. Parmi eux, index.html est la page d'accueil du site Web, login.php est utilisé pour traiter les demandes de connexion et user.json est utilisé pour stocker les informations des utilisateurs.
1. Conception de index.html
Dans index.html, nous devons concevoir un formulaire de connexion composé de deux champs : nom d'utilisateur et mot de passe. Pour faciliter les appels AJAX, vous pouvez ajouter l'attribut id au formulaire.
<!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>
2. L'écriture de login.php
login.php est principalement utilisée pour traiter les demandes de connexion. La demande de connexion doit déterminer si le nom d'utilisateur et le mot de passe sont corrects. S'ils sont corrects, une chaîne au format JSON sera renvoyée pour indiquer une connexion réussie. Sinon, un message d'échec de connexion sera renvoyé.
<?php
header('Content-Type: application/json');
$data = json_decode(file_get_contents('../data/user.json'), true);
$username = $_POST['username'];
$password = $_POST['password'];
if ($username === $data['username'] && $password === $data['password']) {
$result = array('status' => 1, 'msg' => '登录成功');
} else {
$result = array('status' => 0, 'msg' => '用户名或密码错误');
}
echo json_encode($result);
3. L'écriture de user.json
user.json stocke les informations de nom d'utilisateur et de mot de passe. Ce fichier peut être généré de différentes manières, par exemple écrit manuellement, exporté à partir d'une base de données, etc.
{
"username": "admin",
"password": "123456"
}
4. L'écriture de login.js
login.js est principalement utilisée pour traiter la demande de soumission du formulaire de connexion, envoyer les données du formulaire à login.php via AJAX et le résultat de la connexion est renvoyé à la page. via la fonction de rappel.
$(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');
}
}
});
});
});
Dans le code ci-dessus, nous obtenons d'abord l'ID du bouton de connexion via le sélecteur jQuery, puis appelons la méthode AJAX dans l'événement click. Dans la méthode AJAX, nous définissons le type et l'adresse de la demande, ainsi que les données à envoyer à login.php, et spécifions le type de données comme JSON.
Dans la fonction de rappel, nous effectuons des opérations logiques basées sur les données renvoyées. Si la connexion réussit, un message de réussite s'affiche, sinon un message d'échec s'affiche.
À ce stade, une fonction de vérification de connexion de base a été mise en œuvre. Grâce à la collaboration d'AJAX et de JSON, nous pouvons parvenir à un modèle de développement Web plus efficace, rendant l'expérience utilisateur plus fluide et les développeurs plus efficaces.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!