Maison développement back-end Problème PHP 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

Mar 17, 2023 pm 08:35 PM
php json ajax

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>
Copier après la connexion

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(&#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);
Copier après la connexion

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"
}
Copier après la connexion

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');
                }
            }
        });
    });
});
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Guide d'installation et de mise à niveau de PHP 8.4 pour Ubuntu et Debian Guide d'installation et de mise à niveau de PHP 8.4 pour Ubuntu et Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 apporte plusieurs nouvelles fonctionnalités, améliorations de sécurité et de performances avec une bonne quantité de dépréciations et de suppressions de fonctionnalités. Ce guide explique comment installer PHP 8.4 ou mettre à niveau vers PHP 8.4 sur Ubuntu, Debian ou leurs dérivés. Bien qu'il soit possible de compiler PHP à partir des sources, son installation à partir d'un référentiel APT comme expliqué ci-dessous est souvent plus rapide et plus sécurisée car ces référentiels fourniront les dernières corrections de bogues et mises à jour de sécurité à l'avenir.

Date et heure de CakePHP Date et heure de CakePHP Sep 10, 2024 pm 05:27 PM

Pour travailler avec la date et l'heure dans cakephp4, nous allons utiliser la classe FrozenTime disponible.

Discuter de CakePHP Discuter de CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP est un framework open source pour PHP. Il vise à faciliter grandement le développement, le déploiement et la maintenance d'applications. CakePHP est basé sur une architecture de type MVC à la fois puissante et facile à appréhender. Modèles, vues et contrôleurs gu

Téléchargement de fichiers CakePHP Téléchargement de fichiers CakePHP Sep 10, 2024 pm 05:27 PM

Pour travailler sur le téléchargement de fichiers, nous allons utiliser l'assistant de formulaire. Voici un exemple de téléchargement de fichiers.

CakePHP créant des validateurs CakePHP créant des validateurs Sep 10, 2024 pm 05:26 PM

Le validateur peut être créé en ajoutant les deux lignes suivantes dans le contrôleur.

Comment configurer Visual Studio Code (VS Code) pour le développement PHP Comment configurer Visual Studio Code (VS Code) pour le développement PHP Dec 20, 2024 am 11:31 AM

Visual Studio Code, également connu sous le nom de VS Code, est un éditeur de code source gratuit – ou environnement de développement intégré (IDE) – disponible pour tous les principaux systèmes d'exploitation. Avec une large collection d'extensions pour de nombreux langages de programmation, VS Code peut être c

Guide rapide CakePHP Guide rapide CakePHP Sep 10, 2024 pm 05:27 PM

CakePHP est un framework MVC open source. Cela facilite grandement le développement, le déploiement et la maintenance des applications. CakePHP dispose d'un certain nombre de bibliothèques pour réduire la surcharge des tâches les plus courantes.

Comment analysez-vous et traitez-vous HTML / XML dans PHP? Comment analysez-vous et traitez-vous HTML / XML dans PHP? Feb 07, 2025 am 11:57 AM

Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et

See all articles