Maison > Article > interface Web > Implémentation du javascript de la fenêtre de connexion
Mise en œuvre de la fenêtre de connexion JavaScript
Dans les opérations quotidiennes de connexion au site Web, les utilisateurs doivent saisir leur numéro de compte et leur mot de passe, puis cliquer sur le bouton « Connexion » pour terminer l'opération de connexion. Cette opération de connexion nécessite la coopération de la page front-end et du service back-end. Cet article explique comment utiliser JavaScript pour implémenter une fenêtre de connexion simple.
Nous devons d'abord concevoir la fenêtre de connexion en HTML. La fenêtre de connexion la plus simple est un formulaire contenant deux zones de saisie (compte et mot de passe) et un bouton de soumission (connexion). Nous pouvons utiliser la balise d5fd7aea971a85678ba271703566ebfd
pour définir les zones de saisie et les boutons, puis utiliser la balise ff9c23ada1bcecdd1a0fb5d5a0f18437
pour définir le formulaire. Le code est le suivant : d5fd7aea971a85678ba271703566ebfd
标签来定义输入框和按钮,然后使用ff9c23ada1bcecdd1a0fb5d5a0f18437
标签定义表单。代码如下:
<form> <label>账号</label> <input type="text" name="username" required /> <label>密码</label> <input type="password" name="password" required /> <button type="submit">登录</button> </form>
这个表单包含两个输入框,分别是username
和password
。同时,还指定了一个required
属性来保证输入框中一定有值。国际化为了更友好的让用户知道需要输入内容,加入了2e1cf0710519d5598b1f0f14c36ba674
标签来提示用户输入项。
当用户在以上表单中输入了账号和密码之后,需要点击“登录”按钮来完成提交操作。这时我们需要编写JavaScript代码来监听表单的提交事件,并处理相关逻辑。代码如下:
var form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); var username = form.elements['username'].value; var password = form.elements['password'].value; if (username === 'admin' && password === 'admin') { alert('登录成功'); } else { alert('账号或密码错误'); } });
通过document.querySelector
方法获取了表单的DOM元素,然后使用addEventListener
方法来为表单的提交事件提供一个回调函数。当点击“登录”按钮时,将会触发这个回调函数。event
参数表示了事件的相关信息,使用event.preventDefault
方法可以阻止默认行为,即表单的提交操作。
然后,使用表单元素的elements
属性获取到输入框中的值,判断账号密码是否符合要求。如果符合要求,则使用alert
函数提示用户登录成功;否则,提示用户账号或密码错误。
在实际的登录操作中,需要将用户输入的账号和密码提交到后端服务进行验证。在JavaScript中,可以使用XMLHttpRequest
对象实现AJAX请求,以达到这个目的。
代码如下:
var form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); var username = form.elements['username'].value; var password = form.elements['password'].value; var xhr = new XMLHttpRequest(); xhr.open('POST', '/login'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.code === 0) { alert('登录成功'); } else { alert(response.message); } } }; xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password)); });
其中,XMLHttpRequest
对象用于发送异步HTTP请求。我们使用POST请求,将用户名和密码作为请求体内容发送给后端服务。setRequestHeader
方法用于设置请求头;onreadystatechange
rrreee
nom d'utilisateur
et mot de passe
. Dans le même temps, un attribut obligatoire
est également spécifié pour garantir qu'il doit y avoir une valeur dans la zone de saisie. Afin de rendre l'internationalisation plus conviviale et de permettre aux utilisateurs de savoir ce qu'ils doivent saisir, la balise 2e1cf0710519d5598b1f0f14c36ba674
est ajoutée pour inviter l'utilisateur à saisir des éléments. Une fois que l'utilisateur a saisi son numéro de compte et son mot de passe dans le formulaire ci-dessus, il doit cliquer sur Bouton "Connexion" pour terminer l'opération de soumission. À l'heure actuelle, nous devons écrire du code JavaScript pour écouter l'événement de soumission du formulaire et la logique associée au processus. Le code est le suivant :
rrreee#🎜🎜# Obtient l'élément DOM du formulaire via la méthodedocument.querySelector
, puis utilise la méthode addEventListener
pour fournir une fonction de rappel d'événement de soumission de formulaire. Cette fonction de rappel sera déclenchée lorsque le bouton "Connexion" sera cliqué. Le paramètre event
représente les informations liées à l'événement. Utilisez la méthode event.preventDefault
pour empêcher le comportement par défaut, c'est-à-dire l'opération de soumission du formulaire. #🎜🎜##🎜🎜#Ensuite, utilisez l'attribut elements
de l'élément de formulaire pour obtenir la valeur dans la zone de saisie afin de déterminer si le mot de passe du compte répond aux exigences. Si les conditions sont remplies, utilisez la fonction alerte
pour demander à l'utilisateur de se connecter avec succès ; sinon, indiquez à l'utilisateur que le compte utilisateur ou le mot de passe est incorrect. #🎜🎜#XMLHttpRequest
pour implémenter les requêtes AJAX afin d'atteindre cet objectif. #🎜🎜##🎜🎜#Le code est le suivant : #🎜🎜#rrreee#🎜🎜#Parmi eux, l'objet XMLHttpRequest
est utilisé pour envoyer des requêtes HTTP asynchrones. Nous utilisons les requêtes POST pour envoyer le nom d'utilisateur et le mot de passe au service backend en tant que contenu du corps de la requête. La méthode setRequestHeader
est utilisée pour définir l'en-tête de la demande ; la méthode onreadystatechange
est utilisée pour surveiller les changements dans l'état de la demande et exécuter la fonction de rappel. Lorsque la demande réussit et que le résultat renvoyé n'est pas vide, analysez le résultat et déterminez si la connexion a réussi en fonction de la valeur de retour. #🎜🎜##🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜##🎜🎜#Grâce aux étapes ci-dessus, nous avons implémenté une fenêtre de connexion simple et utilisé du code JavaScript pour gérer la fonction de soumission de formulaire et de soumission de données. Ce processus de mise en œuvre démontre également la syntaxe de base et les opérations DOM de JavaScript, et présente également l'utilisation de base des requêtes AJAX. Bien qu'une telle mise en œuvre soit simple, elle constitue la base de projets réels. Sur cette base, la fonction de connexion peut être étendue en fonction des besoins réels. #🎜🎜#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!