Type de données $.Ajax dans jQuery

Le type de données dans la requête jQuery ajax est le type de données que nous attendons du serveur. Ce tutoriel décrit l’utilisation du type de données dans jQuery ajax.

le type de données Ajax dans jQuery

Le type de données dans la requête ajax fait référence au type de données que nous attendons du serveur. Si aucune donnée n’est spécifiée, le jQuery le fera en fonction du type MIME de la réponse.

Habituellement, les données sont en texte brut, HTML ou JSON. Une simple requête ajax avec le type de données est donnée ci-dessous.

$.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
},

Le type de données que nous attendons du serveur dans la requête ci-dessus est JSON. Le type de type de données est toujours une chaîne.

Les types de données disponibles pour une requête ajax sont :

• XML renverra un fichier XML d’un document pouvant être traité par jQuery.

• HTML renverra HTML sous forme de texte brut où les balises de script sont évaluées lorsqu’elles sont insérées dans le DOM.

• script évaluera la réponse en tant que JavaScript et la renverra en texte brut. Nous devons désactiver la mise en cache à l’aide d’un paramètre de chaîne de requête =[TIMESTAMP] avec l’URL jusqu’à ce que l’option de cache soit vraie, et cette méthode convertira la requête POST en GET pour les requêtes de domaine distant.

• JSON évaluera la réponse en tant que JSON et renverra un objet JavaScript. Les requêtes JSON inter-domaines seront converties en jsonp à moins qu’elles n’incluent jsonp : false dans les options de la requête.

  Les données JSON seront analysées strictement ; tout JSON défectueux sera rejeté et une erreur sera générée. Dans la nouvelle version de jQuery, la réponse vide est également rejetée.

• jsonp sera chargé dans un bloc JSON en utilisant le JSONP. Nous pouvons ajouter un callback supplémentaire à la fin de notre URL pour le spécifier.

  Nous pouvons également désactiver la mise en cache en ajoutant le _=[TIMESTAMP] à l’URL jusqu’à ce que l’option de cache soit true.

• text renverra une chaîne de texte en clair.

Les exemples suivants sont des requêtes ajax utilisant les types de données ci-dessus.

Utiliser XML pour une requête Ajax

Une requête ajax pour transférer des données dans un schéma XML personnalisé.

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

Utiliser HTML pour une requête Ajax

Une requête ajax pour transférer des blocs HTML quelque part sur la page.

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

Utiliser un script pour une requête Ajax

Une requête ajax pour ajouter un nouveau script à la page.

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

Utiliser JSON pour une requête Ajax

Une requête ajax pour le transfert de données JSON inclura tout type de données.

$.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);
  }
});

Utiliser JSONP pour une requête Ajax

Une requête ajax pour transférer des données JSON depuis un autre domaine.

$.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);
  }
});

Utiliser du texte pour une requête Ajax

Une requête ajax pour transférer une chaîne de texte brut.

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