Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der JQuery-Ajax-Implementierung der Registrierungs-Echtzeitüberprüfung example_jquery

Detaillierte Erläuterung der JQuery-Ajax-Implementierung der Registrierungs-Echtzeitüberprüfung example_jquery

WBOYOriginal: 2016-05-16 15:26:551345Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierung der Echtzeit-Registrierungsüberprüfung mithilfe von Jquery Ajax. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wenn wir einen Benutzer registrieren, werden wir in Echtzeit gefragt, ob die Informationen des Benutzers verfügbar sind. Ich habe diese Implementierung vor langer Zeit wieder gesehen und aufgezeichnet _∩) Oh!

Lassen Sie uns zunächst $.get in Ajax einführen. Da die Verwendung von $.post der von $.get ähnelt, werde ich es nicht mehr einführen:

Dies ist eine einfache GET-Anfragefunktion zum Ersetzen der komplexen $.ajax. Die Callback-Funktion kann aufgerufen werden, wenn die Anfrage erfolgreich ist. Wenn Sie eine Funktion im Fehlerfall ausführen müssen, verwenden Sie $.ajax.

Code kopieren Der Code lautet wie folgt:

$(selector).get(url,data,success(response, status,xhr ),dataType)

Parameter	Beschreibung
URL	Erforderlich. Gibt die URL an, an die die Anfrage gesendet wird.
Daten	Optional. Gibt die Daten an, die mit der Anfrage an den Server gesendet werden sollen.
Erfolg(Antwort,Status,xhr)	Optional. Gibt eine Funktion an, die ausgeführt werden soll, wenn die Anforderung erfolgreich ist. Zusätzliche Parameter: Antwort – Enthält die Ergebnisdaten der Anfrage Status – Enthält den Status der Anfrage xhr – Enthält XMLHttpRequest-Objekt
dataType	Optional. Gibt den Datentyp der erwarteten Serverantwort an. Standardmäßig trifft jQuery intelligente Entscheidungen. Mögliche Typen: "xml" "html" "Text" "Skript" "json" "jsonp"

Test.php-Webseite anfordern, Rückgabewert ignorieren:

Code kopieren Der Code lautet wie folgt:

$.get("test.php");

Weitere Beispiele:

Beispiel 1

Test.php-Webseite anfordern, 2 Parameter senden, Rückgabewert ignorieren:

Code kopieren Der Code lautet wie folgt:

$.get("test.php", { name : „John“, Zeit: „14 Uhr“ } );

Beispiel 2

Test.php-Rückgabewert anzeigen (HTML oder XML, je nach Rückgabewert):

$.get("test.php", function(data){
 alert("Data Loaded: " + data);
});

Beispiel 3

Test.cgi-Rückgabewert anzeigen (HTML oder XML, je nach Rückgabewert), einen Satz Anforderungsparameter hinzufügen:

$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
  alert("Data Loaded: " + data);
});

Fügen Sie meinen Code unten ein:

<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：

<&#63;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);
&#63;>

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Sternebewertungsfunktion in js_javascript-Fähigkeiten implementiertNächster Artikel：Sternebewertungsfunktion in js_javascript-Fähigkeiten implementiert

In Verbindung stehende Artikel

Mehr sehen