Detaillierte Beispiele zur Ajax-Verwendung in js und jQuery

Natives JS

So senden Sie eine Get-Anfrage

• Erstellen Sie ein Ajax-Objekt
  • var xhr = neue XMLHttpRequest()
• Legen Sie die Anforderungsmethode und die Anforderungsadresse fest [, ob asynchron]
  • xhr.open('get', '/ajax'[, true oder false])
• Vorbereiten des Empfangs des Anforderungstexts
  • xhr.onload = Funktion () { Konsole.log(xhr.responseText) }
  • xhr.onreadystatechange = Funktion () { wenn (xhr.readyState === 4) { console.log( xhr.responseText ) } }
• Anfrage senden
  • xhr.send(null)
    

var xhr = neue XMLHttpRequest()
xhr.open('erhalten', '/ajax')
xhr.onload = Funktion () {
  Konsole.log(xhr.Antworttext)
}
xhr.send(null)

So senden Sie eine Beitragsanfrage

• Erstellen Sie ein Ajax-Objekt
  • var xhr = neue XMLHttpRequest()
• Legen Sie die Anforderungsmethode und die Anforderungsadresse fest [, ob asynchron]
  • xhr.open('post', '/ajax'[, true oder false])
• Vorbereiten des Empfangs des Anforderungstexts
  • xhr.onload = Funktion () { Konsole.log(xhr.responseText) }
  • xhr.onreadystatechange = Funktion () { wenn (xhr.readyState === 4) { console.log( xhr.responseText ) } }
• Anfrage senden
  • xhr.send(null)

var xhr = neue XMLHttpRequest()
xhr.open('posten', '/ajax')
xhr.onload = Funktion () {
  Konsole.log(xhr.Antworttext)
}
xhr.send(null)

Senden einer Get-Anfrage mit Parametern

• var xhr = neue XMLHttpRequest
• Verketten Sie Parameter direkt nach der Anfrageadresse, beginnend mit ?, in der Form Schlüssel=Wert und trennen Sie mehrere Parameter mit &
  • xhr.open('get', '/ajax?name=Jack&Alter=18')
• xhr.onload = Funktion () { Konsole.log( xhr.responseText ) }
• xhr.senden()

Senden einer Post-Anfrage mit Parametern

var xhr = neue XMLHttpRequest

Nach der Anfrageadresse muss nichts mehr hinzugefügt werden

• xhr.open('posten', '/ajax')

xhr.onload = Funktion () { Konsole.log( xhr.responseText ) }

Die von der Post-Methode übertragenen Parameter werden direkt in () nach xhr.send() geschrieben.

• Erfassen Sie die Datenschlüssel=Werte selbst
  • Setzen Sie den Anforderungsheader selbst
  • xhr.setRequestHeadr('Inhaltstyp', 'Anwendung/x-www-form-urlencoded')
• FormData sammelt Daten
  • Nichts ist nötig, verwenden Sie einfach FormData zum Sammeln von Daten
  • var fd = neue Formulardaten (DOM)
  • Bringen Sie beim Senden einer Anfrage einfach fd mit.

var xhr = neue XMLHttpRequest()
xhr.open('posten', '/ajax')
xhr.onload = Funktion () {
  Konsole.log(xhr.Antworttext)
}
xhr.setRequestHeadr('Inhaltstyp', 'Anwendung/x-www-form-urlencoded')
xhr.send('Schlüssel=Wert&Schlüssel=Wert')

var fd = neue Formulardaten (document.querySelector ('Formular'))
var xhr = neue XMLHttpRequest()
xhr.open('posten', '/ajax')
xhr.onload = Funktion () {
  Konsole.log(xhr.Antworttext)
}
xhr.senden(fd)

jQuery

So verwenden Sie mehrere Parameter von $.get

Adresse

• Parameter Schlüssel=Wert oder { Name: 'Jack' }
• Erfolgreiche Callback-Funktion
• Der erwartete Datentyp, der vom Backend zurückgegeben wird
  • Text: Nichts tun und Ihnen das Ergebnis direkt geben
  • json: führt auf jeden Fall einen JSON.parse()-Schritt aus

$.post mehrere Parameter, wie man sie verwendet

• Adresse
• Parameter Schlüssel=Wert oder { Name: 'Jack' }, FormData kann nicht gesendet werden
• Erfolgreiche Callback-Funktion
• Der erwartete Datentyp, der vom Backend zurückgegeben wird

Verwendung mehrerer Parameter von $.ajax

• Es handelt sich um die Konfigurationselementoptionen
  • URL: Anfrageadresse
  • Methode/Typ: Anforderungsmethode
  • Daten: trägt Parameter
  • dataType: Der vom Backend zurückgegebene Datentyp
  • Erfolg: erfolgreicher Rückruf
  • Fehler: Rückruf fehlgeschlagen
  • contentType: wird beim Senden von FormData verwendet
  • processData: wird beim Senden von FormData verwendet

JSONP

So senden Sie eine Jaonp-Anfrage mit $.ajax

• Der Datentyp muss JSONP sein.
• Die Methode muss get sein
• jsonp: Wird durch den Hintergrund bestimmt
  

$.ajax({
  URL: „/jsonp“,
  Daten: {},
  Datentyp: "jsonp",
  jsonp: 'Rückruf',
  Erfolg (res) {
    Konsole.log(res)
  }
})

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Ajax in js und jQuery. Weitere Informationen zur Verwendung von Ajax in js und jQuery finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!