Heim > Web-Frontend > js-Tutorial > Detailliertes Beispiel eines Ajax-Einreichungsformulars (mit Code)

Detailliertes Beispiel eines Ajax-Einreichungsformulars (mit Code)

php中世界最好的语言
Freigeben: 2018-04-03 11:20:52
Original
2634 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen ein detailliertes Beispiel für die Ajax-Übermittlung eines Formulars (mit Code). Was sind die Vorsichtsmaßnahmen für die Ajax-Übermittlung eines Formulars? sehen.

Ajax (Ajax-Entwicklung)

AJAX ist „Asynchrones Javascript und XML“ (asynchrones JavaScript und XML), Bezieht sich auf eine Webentwicklungstechnologie zum Erstellen interaktiver Webanwendungen.

AJAX = Asynchrones JavaScript und XML (eine Teilmenge der Standard Universal Markup Language).

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Ich lerne schon seit langem Code, verwende Ajax jedoch nur selten. Das Folgende ist meine Meinung und mein Verständnis von Ajax als Ajax-Neuling .

Ajax, asynchrone Anfrage. Durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund kann AJAX die Webseite asynchron aktualisieren. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Ich habe kürzlich die Ajax-Formularübermittlung getestet. Es gibt zwei Arten der Formularübermittlung: Post und Get. Obwohl GET im Vergleich zu POST einfacher und schneller ist, funktioniert es .

Die Verwendung von POST-Anfragen ist jedoch in den folgenden Situationen effizienter:

1. Cache-Dateien können nicht verwendet werden (Aktualisierung von Dateien oder Datenbanken auf dem Server)

2 .Senden große Datenmengen an den Server (POST hat keine Datenbeschränkung)

3. Beim Senden von Benutzereingaben mit unbekannten Zeichen ist POST stabiler und zuverlässiger als GET

Die $get-Methode sendet das Formular

get()-Methode lädt Informationen über eine Remote-HTTP-GET-Anfrage

Format

$(selector).get(url,data,success(response,status,xhr),dataType)
Nach dem Login kopieren

Zum Beispiel:

Fordern Sie die demo.php-Webseite an, senden Sie 2 Parameter, ignorieren Sie den Rückgabewert:

$.get("demo.php", { name: "John", time: "2pm" } );

demo.php ist die URL-Adresse zum Senden der Anfrage

{ Name: „John“, Zeit: „14 Uhr“ } Die Daten, die an den Server gesendet werden sollen.

$POST-Methode zum Absenden des Formulars

$.post

jQuery.post( url, [data], [callback] , [Typ] ): Verwenden Sie die POST-Methode, um eine asynchrone Anfrage zu stellen

Parameter:

url (String): URL-Adresse zum Senden der Anfrage.

Daten (Karte) : (Optional) An den Server zu sendende Daten, ausgedrückt in Form von Schlüssel/Wert-Paaren.

Rückruf (Funktion): (optional) Rückruffunktion , wenn das Laden erfolgreich ist (diese Methode wird nur aufgerufen, wenn der Rückgabestatus der Antwort erfolgreich ist).

Zum Beispiel bei der Registrierung ist die Verwendung des Bestätigungscodes

<script type="text/javascript">
function redirect(url) {
location.href = url;
}
$("#code_btn").click(function(){
var tel = $("#username").val();
if(tel == ""){
alert("请输入正确的手机号码作为账号进行注册");
$("#username").focus();
return false;
}
if(!(/^1[3|4|5|8|7][0-9]\d{4,8}$/.test(tel))){
alert("请使用正确的手机号码作为账号进行注册!");
$("#username").focus();
return false;
};
var codeNum = $("#code").val();
$.post( '{APP_PATH}index.php?m=member&c=index&a=public_send_message', {tel:tel,codeNum:codeNum}, function(result){
// console.log(result);
})
timep(60);
});
function timep(j){
$("#code_btn").attr('disabled',"true");
$("#code_btn").val(j+"秒");
time=setInterval(function(){
j=j-1;
$("#code_btn").val(j+"秒");
if(j==0){
$("#code_btn").removeAttr('disabled');
clearInterval(time);
j=60;
$("#code_btn").val("点击获取验证码");
}
},1000);
}
</script>
Nach dem Login kopieren

APP_PATH}index.php?m=member&c=index&a=public_send_message die URL-Adresse zu Anfrage senden

{tel:tel,codeNum:codeNum} sind die Daten, die an den Server gesendet werden sollen, ausgedrückt in Form von Schlüssel/Wert-Paaren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ajax zum Abrufen nationaler Wettervorhersage-API-Daten

Interaktiver Ajax- und JSON-Datenspeicher

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel eines Ajax-Einreichungsformulars (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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