Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie sende ich eine GET/POST-Anfrage mit Javascript? (ausführliche Beispiele)

WBOY
Freigeben: 2021-12-20 17:28:29
nach vorne
21029 Leute haben es durchsucht

Dieser Artikel vermittelt Ihnen relevantes Wissen über die Verwendung von Javascript zum Senden von GET/POST-Anfragen. Wenn Sie nur die Formularübermittlung verwenden, müssen wir einen Blick darauf werfen, wie Sie JavaScript zum Senden verwenden wird Ihnen hilfreich sein.

Wie sende ich eine GET/POST-Anfrage mit Javascript? (ausführliche Beispiele)

JQuery-basierte GET/POST-Datenübermittlungsmethode

Wenn Sie mit Javascript noch nicht vertraut sind, sind Sie möglicherweise wie ich mit JQuery nicht vertraut, daher sollten Sie es entsprechend bekannt machen Das ist der Nachfolger von JavaScript. Eine weitere hervorragende JavaScript-Codebibliothek (oder JavaScript-Framework) nach Prototype. Der Entwurfszweck von JQuery besteht darin, „weniger zu schreiben, mehr zu tun“, was bedeutet, weniger Code zu schreiben und mehr Dinge zu tun.

Es kapselt häufig verwendete Funktionscodes in JavaScript, stellt ein einfaches JavaScript-Entwurfsmuster bereit und optimiert HTML-Dokumentvorgänge, Ereignisverarbeitung, Animationsdesign und Ajax-Interaktion. Die Kernfunktionen von JQuery lassen sich wie folgt zusammenfassen: Es verfügt über eine einzigartige Kettensyntax und eine kurze und übersichtliche Multifunktionsschnittstelle. Es verfügt über einen effizienten und flexiblen CSS-Selektor und verfügt über ein praktisches Plug-In Erweiterungsmechanismus und umfangreiche Plug-Ins. jQuery ist mit verschiedenen gängigen Browsern kompatibel, z. B. IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ usw.

Die offizielle Website-Adresse von JQuery können Sie hier anklicken. Laut der offiziellen Version hat die neueste Version Version 3.2.1 erreicht. Daher wird empfohlen, die neueste JQuery von der offiziellen Website herunterzuladen, um weitere Funktionen zu erhalten.

JQuery ist sehr leistungsfähig, aber zur Implementierung der aktuellen Funktion sind lediglich zwei einfache APIs erforderlich. Sie können auf klicken, um die vollständige API-Dokumentation anzuzeigen. Darüber hinaus gibt es auf runnoob.com auch Lernmaterialien.

$ .get (URL, Daten, Rückruf). mit der Anfrage Die Daten werden an den Server gesendet, das Format ist JSON

Rückrufoptional, Rückgabefunktion, die Funktion, die ausgeführt wird, wenn die Anfrage erfolgreich istParameter BeschreibungURLErforderlich, gibt die URL an, die Sie anfordern müssenDaten
$.post(url, data, callback)

Optional, gibt die Daten an, die zusammen mit der Anfrage an den Server gesendet werden sollen, das Format ist json

callbackoptional, Gibt die Funktion zurück, die Funktion, die ausgeführt wird, wenn die Anforderung erfolgreich ist
	<script src="static/js/jquery-3.2.1.min.js"></script>
Nach dem Login kopieren
	<script>
		function doPost(url)
		{
			var val1 = document.getElementsByName("key1").value;
			var val2 = document.getElementsByName("key2").value;

			$.post(url, {'key1':val1, 'key2':val2});
		}
	</script>
Nach dem Login kopieren
Fügen Sie dann einen Onclick hinzu Attribut zu Ihrer Eingabe-/Schaltflächenbezeichnung hinzufügen oder dorthin, wo Sie Daten senden müssen, zum Beispiel:
	...
	<input type="button" value="submit" onclick="doPost(&#39;/&#39;)" />
	...
Nach dem Login kopieren
Verwenden Sie Javascript/Formular zum Senden der GET/POST-Datenübermittlungsmethode
/*
* @url: url link
* @action: "get", "post"
* @json: {'key1':'value2', 'key2':'value2'} 
*/
function doFormRequest(url, action, json)
{
    var form = document.createElement("form");
    form.action = url;
    form.method = action;

    // append input attribute and valus
    for (var key in json)
    {
        if (json.hasOwnProperty(key))
        {
            var val = json[key];
            input = document.createElement("input");
            input.type = "hidden";
            input.name = key;
            input.value = val;

            // append key-value to form
            form.appendChild(input)
        }
    }

    // send post request
    document.body.appendChild(form);
    form.submit();

    // remove form from document
    document.body.removeChild(form);
}
Nach dem Login kopieren
Man muss den Unterschied während der Anwendung langsam verstehen. 【Verwandte Empfehlungen:
Die Verwendungsmethode ist wie folgt. Verwenden Sie zunächst auf der Seite, auf der JQuery aufgerufen werden muss Skript-Tag zum Importieren der Jquery-Datei, zum Beispiel: Dann verwenden Sie den Leerraum der Webseite, deklarieren Ihre Methode und die Parameter, die übergeben werden müssen. Sie können Folgendes tun:
Auf diese Weise können Sie JQuery verwenden, um die Daten zu senden. Eine andere Methode besteht darin, ein Formular zu erstellen und das Formular zum Absenden zu verwenden.
Die aufrufende Methode ist sehr einfach. Kopieren Sie diesen Codeblock in das Skript-Tag in Ihrem eigenen HTML-Dokument. Anschließend können Sie ihn direkt verwenden und GET auswählen / Die POST-Methode hängt von Ihren eigenen Bedürfnissen ab.
Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWie sende ich eine GET/POST-Anfrage mit Javascript? (ausführliche Beispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
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