HOWTO · jQuery

$.Ajax-Datentyp in jQuery

Dieses Tutorial demonstriert die Verwendung des $.ajax-Datentyps in jQuery.

Auf dieser Seite

Der Datentyp in der jQuery-Ajax-Anfrage ist der Datentyp, den wir vom Server erwarten. Dieses Tutorial beschreibt die Verwendung des Datentyps in jQuery ajax.

der Ajax-Datentyp in jQuery

Der Datentyp in der Ajax-Anfrage bezieht sich auf den Datentyp, den wir vom Server erwarten. Wenn keine Daten angegeben werden, erstellt jQuery diese anhand des MIME-Typs der Antwort.

Normalerweise handelt es sich bei den Daten um Klartext, HTML oder JSON. Eine einfache Ajax-Anfrage mit Datentyp ist unten angegeben.

$.ajax({
    type : "POST",
    url : user,
    datatype : "application/json",
    contentType: "text/plain",
    success : function(employee_data) {
      //some code here
    },
    error : function(error) {
   //some error error here
},

Der Datentyp, den wir vom Server in der obigen Anfrage erwarten, ist JSON. Der Typ für Datentyp ist immer ein String.

Die verfügbaren Datentypen für eine Ajax-Anfrage sind:

  • XML gibt eine XML-Datei eines Dokuments zurück, das von jQuery verarbeitet werden kann.

  • HTML gibt HTML als Klartext zurück, wobei die Skript-Tags ausgewertet werden, während sie in das DOM eingefügt werden.

  • script wertet die Antwort als JavaScript aus und gibt sie als Klartext zurück. Wir müssen das Caching mithilfe eines Abfragezeichenfolgenparameters =[TIMESTAMP] mit der URL deaktivieren, bis die Cache-Option wahr ist, und diese Methode konvertiert die POST-Anforderung in GET für Remotedomänenanforderungen.

  • JSON wertet die Antwort als JSON aus und gibt ein JavaScript-Objekt zurück. Die domänenübergreifenden JSON-Anfragen werden in jsonp konvertiert, es sei denn, sie enthalten jsonp : false in den Anfrageoptionen.

    Die JSON-Daten werden strikt geparst; Jedes fehlerhafte JSON wird abgelehnt und ein Fehler ausgegeben. In der neueren Version von jQuery wird auch die leere Antwort abgelehnt.

  • jsonp wird mit JSONP in einen JSON-Block geladen. Wir können am Ende unserer URL einen zusätzlichen callback hinzufügen, um dies zu spezifizieren.

    Wir können das Caching auch deaktivieren, indem wir das _=[TIMESTAMP] an die URL anhängen, bis die Cache-Option true ist.

  • text gibt eine einfache Textzeichenfolge zurück.

Die folgenden Beispiele sind einige Ajax-Anforderungen, die die oben genannten Datentypen verwenden.

Verwendung von XML für eine Ajax-Anfrage

Eine Ajax-Anforderung zum Übertragen von Daten in einem benutzerdefinierten XML-Schema.

$.ajax({
  url: 'http://demoxmlurl',
  type: 'GET',
  dataType: 'xml',
  success: parseXml
});
});

Verwendung von HTML für eine Ajax-Anfrage

Eine Ajax-Anforderung zum Übertragen von HTML-Blöcken an eine Stelle auf der Seite.

$.ajax({
  type: 'POST',
  url: 'post.php',
  dataType: 'json',
  data: {id: $('#id').val()},
});

Verwendung von Skript für eine Ajax-Anfrage

Eine Ajax-Anforderung zum Hinzufügen eines neuen Skripts zur Seite.

$.ajax({url: 'http://unknown.jquery.com/foo', dataType: 'script', cache: true})
    .then(
        function() {
          console.log('Success');
        },
        function() {
          console.log('Failed');
        });

Verwendung von JSON für eine Ajax-Anfrage

Eine Ajax-Anforderung zum Übertragen von JSON-Daten enthält alle Arten von Daten.

$.ajax({
  url: 'delftstack.php',
  type: 'POST',
  data: {ID: ID, First_Name: First_Name, Last_Name: Last_Name, Salary: Salary},
  dataType: 'JSON',
  success: function(employee_data) {
    console.log('Success');
    $('#result').text(employee_data);
  }
});

Verwendung von JSONP für eine Ajax-Anfrage

Eine Ajax-Anforderung zum Übertragen von JSON-Daten von einer anderen Domäne.

$.ajax({
  type: 'GET',
  url: url,
  async: false,
  jsonpCallback: 'jsonCallback',
  contentType: 'application/json',
  dataType: 'jsonp',
  success: function(json) {
    console.dir(json.sites);
  },
  error: function(er) {
    console.log(er.message);
  }
});

Verwendung von Text für eine Ajax-Anfrage

Eine Ajax-Anforderung zum Übertragen einer Klartextzeichenfolge.

$.ajax({
  type: 'POST',
  url: 'delftstack.php',
  data: '{}',
  async: true,
  dataType: 'text',
  success: function(data) {
    console.log(data);
  }
});