Javascript sendet Get-Anfrageparameter

JavaScript ist eine häufig verwendete Skriptsprache, die sowohl für die Front-End- als auch für die Backend-Entwicklung verwendet werden kann. Während des Front-End-Entwicklungsprozesses ist es häufig erforderlich, Anforderungen über AJAX an den Back-End-Server zu senden und Antwortdaten abzurufen. Unter diesen ist die GET-Anfrage die am häufigsten verwendete Anfragemethode. In diesem Artikel wird erläutert, wie Sie mit JavaScript GET-Anfragen senden und wie Sie GET-Anfrageparameter senden.

1. JavaScript sendet GET-Anfrage

In JavaScript können Sie das XMLHttpRequest-Objekt (kurz XHR-Objekt) verwenden, um HTTP-Anfragen zu senden. Das Folgende ist ein einfaches Beispiel für die Verwendung eines XHR-Objekts zum Senden einer GET-Anfrage:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Im obigen Code wird zuerst ein XHR-Objekt erstellt, und die Anforderungsmethode ist GET und die Anforderungsadresse ist /getUserInfo. Dann wird ein onreadystatechange-Ereignishandler registriert, und wenn der Antwortstatus 4 ist (was anzeigt, dass die Anfrage abgeschlossen wurde) und der Antwortcode 200 ist, wird der Antworttext gedruckt. Senden Sie abschließend die Anfrage über die Sendemethode.

Es ist zu beachten, dass es bei XMLHttpRequest Kompatibilitätsprobleme gibt. In IE6 und 7 müssen stattdessen ActiveXObject-Objekte verwendet werden.

2. JavaScript sendet GET-Anforderungsparameter

In praktischen Anwendungen ist es häufig erforderlich, Anforderungsparameter an den Backend-Server zu senden. Bei einer GET-Anfrage werden Anforderungsparameter normalerweise über die Abfragezeichenfolge der URL übergeben. JavaScript kann verwendet werden, um Anforderungsparameter an die URL anzuhängen, indem die URL gespleißt wird, wie unten gezeigt:

var username = 'Tom';
var age = 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo?username=' + username + '&age=' + age, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Durch das Spleißen der URL werden die beiden Anforderungsparameter Benutzername und Alter an die URL angehängt. Es ist zu beachten, dass eine URL-Codierung durchgeführt werden muss, wenn die Anforderungsparameter Nicht-ASCII-Zeichen wie Chinesisch enthalten, da andernfalls verstümmelte Zeichen auftreten können. Sie können die Funktion encodeURI zum Codieren verwenden, wie unten gezeigt:

var username = '小明';
var age = 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo?username=' + encodeURI(username) + '&age=' + age, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Verwenden Sie im obigen Code die Funktion encodeURI, um die chinesische Zeichenfolge per URL zu codieren, um sicherzustellen, dass die Anforderungsparameter korrekt übergeben werden.

Zusätzlich zum Spleißen von URLs können Sie auch die setRequestHeader-Methode des XHR-Objekts verwenden, um Anforderungsparameter an den Anforderungsheader anzuhängen. Wie unten gezeigt:

var params = 'username=' + encodeURI('小明') + '&age=' + 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(params);

Im obigen Code werden die Anforderungsparameter zunächst in der Form „Parametername = Parameterwert“ gespleißt und das Ergebnis in der Variablen params gespeichert. Verwenden Sie dann die setRequestHeader-Methode, um den Inhaltstyp des Anforderungsheaders auf application/x-www-form-urlencoded zu setzen, um den Server über das Anforderungsparameterformat zu informieren. Senden Sie abschließend die Anfrage über die Sendemethode und übergeben Sie die Anfrageparameter.

Durch die obige Einführung haben wir gelernt, wie man mit JavaScript GET-Anfragen sendet und wie man GET-Anfrageparameter sendet. In tatsächlichen Anwendungen kann die geeignete Methode ausgewählt werden, um Anforderungsparameter entsprechend den spezifischen Anforderungen zu übergeben und so die Interaktion zwischen Front-End- und Back-End-Daten zu realisieren.

Das obige ist der detaillierte Inhalt vonJavascript sendet Get-Anfrageparameter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!