Maison > Article > interface Web > Explication détaillée de l'implémentation jquery ajax de la vérification en temps réel de l'enregistrement example_jquery
L'exemple de cet article décrit la mise en œuvre de la vérification de l'inscription en temps réel à l'aide de jquery ajax. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Lorsque nous enregistrons un utilisateur, nous serons informés en temps réel si les informations de l'utilisateur sont disponibles. Il s'agit d'une application ajax. J'ai vu cette implémentation il y a longtemps, je l'ai revue aujourd'hui et je l'ai enregistrée O(∩. _∩) Ah !
Tout d’abord, introduisons $.get en ajax. Puisque l’utilisation de $.post est similaire à $.get, je ne le présenterai plus :
Il s'agit d'une simple fonction de requête GET pour remplacer le complexe $.ajax. La fonction de rappel peut être appelée lorsque la demande aboutit. Si vous devez exécuter une fonction en cas d'erreur, utilisez $.ajax.
Paramètres | Description |
---|---|
url | Obligatoire. Spécifie l'URL à laquelle la demande sera envoyée. |
données | Facultatif. Spécifie les données à envoyer au serveur avec la requête. |
succès (réponse, statut, xhr) |
Facultatif. Spécifie une fonction à exécuter lorsque la demande réussit. Paramètres supplémentaires :
|
Type de données |
Facultatif. Spécifie le type de données de la réponse attendue du serveur. Par défaut, jQuery prendra des décisions intelligentes. Types possibles :
|
Plus d'exemples :
Exemple 1
Demander la page web test.php, envoyer 2 paramètres, ignorer la valeur de retour :
Exemple 2
Afficher la valeur de retour test.php (HTML ou XML, selon la valeur de retour) :
$.get("test.php", function(data){ alert("Data Loaded: " + data); });
Exemple 3
Affichez la valeur de retour test.cgi (HTML ou XML, selon la valeur de retour), ajoutez un ensemble de paramètres de requête :
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
Collez mon code ci-dessous :
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户注册</title> <script type="text/javascript" src="jquery/jquery-1.5.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#username").focus(); $("#username").keyup(function() { name= $("#username").val();//val()方法返回或设置被选元素的值。 if(len(name)< 4)//调用下面的自定义len函数 $("#username1").html("<font color=red>注册名称必须大于等于2位</font>"); else $("#username1").html("<font color=red>符合要求</font>");//html() 方法返回或设置被选元素的内容 (inner HTML)。 }); $("#username").blur(function(){ name= $("#username").val(); $.get("t1.php", { username:name } ,function(data){//判断数据库中是否存在此用户名 重点$.get,$.post t1.php在下面 if(data==1) {$("#username1").html("<font color=green>符合要求</font>");} else {$("#username1").html("<font color=green>已被占用</font>");} }); }); }); function len(s) {//若为汉字之类的字符则占两个 var l = 0; var a = s.split(""); for (var i=0;i<a.length;i++) { if (a[i].charCodeAt(0)<299) { l++; } else { l+=2; } } return l; } </script> </head> <body> <form name="fram" action="register.php" onsubmit="return docheck();"> <table width="330" border="0" align="center" cellpadding="5" bgcolor="#eeeeee"> <tr> <td>用户名:</td> <td><input name="username" type="text" id="username" /></td><td><div id="username1"></div></td> </tr> </table> </form> </body> </html>
t1.php:
<?php $link=mysql_connect("localhost","root",""); mysql_select_db("test"); mysql_query("set names utf8");// $sql="select * from user where user='".$_GET['username']."'";// $result=mysql_query($sql) or die(mysql_error()); $num=mysql_affected_rows(); if($num==0) $msg=1; else $msg=0; echo $msg;//返回值 mysql_close($link); ?>
J'espère que cet article sera utile à tous ceux qui programment jQuery.