Apprenez AJAX à partir de zéro et créez des formulaires de vérification automatique

Cet article présente principalement l'apprentissage base zéro d'AJAX pour créer des formulaires de vérification automatique. Les amis qui en ont besoin peuvent s'y référer

Les pages Web traditionnelles détectent si le nom d'utilisateur est occupé lors de l'inscription. évidemment lent et maladroit.

Lorsque ajax est apparu, cette expérience a été grandement améliorée, car lorsque l'utilisateur remplit le formulaire, les éléments du formulaire signés ont été envoyés au serveur, puis les données sont interrogées en fonction du contenu rempli par l'utilisateur. Le numéro de requête est automatiquement demandé sans actualisation de la page. Des applications comme celle-ci améliorent considérablement l'expérience utilisateur. Cette section présente brièvement comment créer des formulaires de vérification automatique. Analysez le rôle d’ajax en principe.

1. Construisez le framework

Construisez d'abord le framework html

<form name="register">
<p><label for = "User">输用户名<input type="text" name="User" id="User"></label><span id="UserResult"></span></p>
<p><label for = "passwd1">输入密码<input type="password" name="passwd1" id="passwd1"></label></p>
<p><label for = "passwd2">重复输入<input type="password" name="passwd2" id="passwd2"></label></p>
<p><input type="submit" value="注册"></p>
<p><input type="reset" value="重置"></p>
</form>

2. Établissez une requête asynchrone

Lorsque l'utilisateur a fini de saisir le « nom d'utilisateur » et commence à saisir d'autres formulaires, la vérification des antécédents est effectuée :

Entrez le nom d'utilisateurf265d721b107d2686761494bfa55edee
Dans la fonction startCheck(), envoyez directement le mot-clé this et passez d'abord l'objet zone de texte lui-même en paramètre, et la fonction elle-même détermine si l'entrée de l'utilisateur est vide, et si c'est le cas, si elle est vide, revenez directement, concentrez-vous sur la zone de texte du nom d'utilisateur et donnez les invites correspondantes.

function startCheck(oInput){
//判断是否有输入，没有输入则直接返回。
if(!oInput.value){
oInput.focus();//聚焦到用户名文本框
document.getElementById("User").innerHTML="用户名不能为空";
return;
}
//创建异步请求
//....
}

Lorsque l'utilisateur saisit le nom d'utilisateur, utilisez toLowerCase() pour le convertir en lettres minuscules et établir une requête asynchrone.

La fonction showResult() est utilisée pour afficher le texte réponseText renvoyé par le traitement du serveur.

<script type="text/javascript">
var xmlHttp;
function createXMLHttprequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startCheck(oInput) {
//判断是否有输入，没有输入则直接返回。
if (!oInput.value) {
oInput.focus(); //聚焦到用户名文本框
document.getElementById("User").innerHTML = "用户名不能为空";
return;
}
//创建异步请求
createXMLHttpRequest();
var sUrl = "1-9.aspx?user=" + oInput.value.toLowerCase() + "&timestamp=" + new Date().getTime();
xmlHttp.open("GET", sUrl, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
showResult(xmlHttp.responseText); //显示服务结果
}
xmlHttp.send(null);
}
</script>

3. Traitement du serveur

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
if(Request["user"]=="isaac")
Response.Write("Sorry, " + Request["user"] + " already exists.");
else
Response.Write(Request["user"]+" is ok.");
%>

4. Afficher les résultats d'une requête asynchrone

De manière asynchrone lorsque l'utilisateur saisit d'autres éléments dans le formulaire Renvoyer les résultats a été complété tranquillement en arrière-plan.

function showResult(sText) {
var oSpan = document.getElementById("UserResult");
oSpan.innerHTML = sText;
if (sText.indexOf("already exists") >= 0)
//如果用户名已被占用
oSpan.style.color = "red";
else
oSpan.style.color = "black";
}

Le code ci-dessus affiche les résultats renvoyés par le serveur.

Le code complet de ce cas

输用户名




输入密码




重复输入

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Implémentation de l'affichage de liens des données dans des listes déroulantes basées sur Ajax

Explication détaillée de la synchronisation et de l'asynchronisme ajax en jquery

Téléchargement asynchrone Ajax en jquery

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!