Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementierung von Ajax, um basierend auf jQuery_jquery zu überprüfen, ob ein Benutzername vorhanden ist

WBOY
Freigeben: 2016-05-16 15:07:32
Original
1402 Leute haben es durchsucht

Dieser Artikel teilt Ihnen den Implementierungscode von Ajax basierend auf jQuery mit, um zu überprüfen, ob der Benutzername vorhanden ist. Programmierer können bei Bedarf auf den Quellcode dieses Artikels verweisen.

jQuery.ajax-Übersicht

HTTP-Anfrage zum Laden von Remote-Daten.

Implementiert durch jQuery, das AJAX zugrunde liegt. Einfache und benutzerfreundliche High-Level-Implementierungen finden Sie unter $.get, $.post usw. $.ajax() gibt das von ihm erstellte XMLHttpRequest-Objekt zurück. In den meisten Fällen müssen Sie dieses Objekt nicht direkt bearbeiten, in besonderen Fällen kann es jedoch zum manuellen Beenden der Anforderung verwendet werden.

$.ajax() hat nur einen Parameter: Parameterschlüssel/Wertobjekt, einschließlich aller Konfigurations- und Rückruffunktionsinformationen. Detaillierte Parameteroptionen finden Sie weiter unten.
Hinweis: Wenn Sie die Option dataType angeben, stellen Sie sicher, dass der Server die richtigen MIME-Informationen zurückgibt (z. B. gibt XML „text/xml“ zurück). Falsche MIME-Typen können unvorhersehbare Fehler verursachen.

Hinweis: Wenn dataType auf „script“ gesetzt ist, werden bei Remote-Anfragen (nicht unter derselben Domäne) alle POST-Anfragen in GET-Anfragen umgewandelt. (Da zum Laden das DOM-Skript-Tag verwendet wird)
In jQuery 1.2 können Sie JSON-Daten domänenübergreifend laden. Bei der Verwendung müssen Sie den Datentyp auf JSONP festlegen. Beim Aufrufen einer Funktion im JSONP-Format, z. B. „myurl?callback=?“, ersetzt jQuery automatisch ? durch den richtigen Funktionsnamen, um die Callback-Funktion auszuführen. Wenn der Datentyp auf „jsonp“ eingestellt ist, ruft jQuery automatisch die Rückruffunktion auf.

Parameterliste:

Hier gibt es mehrere Ajax-Ereignisparameter: beforeSend, success, complete, error. Wir können diese Ereignisse definieren, um jede unserer Ajax-Anfragen gut zu verarbeiten. Beachten Sie, dass dies in diesen Ajax-Ereignissen alles auf die Optionsinformationen der Ajax-Anfrage verweist (bitte sehen Sie sich das Bild an, wenn Sie über die get()-Methode sprechen).
Bitte lesen Sie die obige Parameterliste sorgfältig durch. Wenn Sie jQuery für die Ajax-Entwicklung verwenden möchten, müssen Sie mit diesen Parametern vertraut sein.
Beispiel:

1. Seite AJax.aspx anfordern

HTML-Code

<div> 
<input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> 
<div id="showResult" style="float:left">div> 
div> 
Nach dem Login kopieren

JS-Code

<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
function JudgeUserName() 
{ 
$.ajax({ 
type:"GET", 
url:"AjaxUserInfoModify.aspx", 
dataType:"html", 
data:"userName="+$("#txtName").val(), 
beforeSend:function(XMLHttpRequest) 
{ 
$("#showResult").text("正在查询"); 
//Pause(this,100000); 
}, 
success:function(msg) 
{ 
$("#showResult").html(msg); 
$("#showResult").css("color","red"); 
}, 
complete:function(XMLHttpRequest,textStatus) 
{ 
//隐藏正在查询图片 
}, 
error:function() 
{ 
//错误处理 
} 
}); 
} 
</script> 
Nach dem Login kopieren

2, Seite AjaxUserInfoModify.aspx

Backend-Code

protected void Page_Load(object sender, EventArgs e) 
{ 
string userName = Request.QueryString["userName"].ToString (); 
if (userName == "James Hao") 
{ 
Response.Write ("用户名已经存在!"); 
} 
else 
{ 
Response.Write ("您可以使用此用户名!"); 
} 
} 
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage