requête jquery ajax pour obtenir le formatage des données

Dans le développement front-end, il est souvent nécessaire d'obtenir des données du back-end via des requêtes AJAX. À ce stade, si le format des données renvoyé par le backend n'est pas le format souhaité, le formatage des données doit être effectué. Cet article expliquera comment utiliser la requête jQuery AJAX pour obtenir des données et formater les données obtenues.

1. Requête jQuery AJAX pour obtenir des données

Lorsque nous avons besoin d'obtenir des données du backend, nous pouvons utiliser la méthode AJAX de jQuery. Ce qui suit est une requête AJAX de base :

$.ajax({
  type: "GET",
  url: "/api/data",
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log(error);
  }
});

Parmi eux, le type est le type de requête, qui peut être GET, POST, etc. ; l'url est l'adresse de la requête est la fonction de rappel une fois la requête réussie et les données ; le paramètre est les données renvoyées par le backend ; l'erreur est la fonction de rappel après l'échec de la requête.

2. Formatage des données obtenues

Les données obtenues à partir du backend peuvent ne pas être au format souhaité et doivent être formatées. Plusieurs méthodes courantes de formatage des données seront présentées ci-dessous.

1. Formatage JSON

JSON est un format d'échange de données léger, idéal pour transmettre des données entre le front-end et le back-end. La plupart des interfaces backend renverront les données au format JSON, nous devons donc analyser et formater les données JSON renvoyées.

Les données obtenues à l'aide de la méthode AJAX de jQuery ont été sérialisées au format JSON, nous n'avons donc besoin que d'utiliser la méthode parseJSON de jQuery pour analyser les données :

$.ajax({
  type: "GET",
  url: "/api/data",
  success: function(data) {
    var jsonData = $.parseJSON(data);
    console.log(jsonData);
  },
  error: function(error) {
    console.log(error);
  }
});

2. Formatage XML

Dans certains scénarios, après la fin, les données peuvent être renvoyées dans Format XML, et nous devons analyser et formater les données XML.

Vous pouvez utiliser le DOMParser de JavaScript pour analyser les données XML. Voici un exemple simple :

$.ajax({
  type: "GET",
  url: "/api/data",
  success: function(data) {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(data,"text/xml");
    console.log(xmlDoc);
  },
  error: function(error) {
    console.log(error);
  }
});

3. Formatage HTML

Parfois, nous pouvons avoir besoin d'obtenir des données au format HTML à partir du backend, et les données doivent être formatées.

Vous pouvez restituer les données HTML obtenues dans une page HTML, puis utiliser la méthode find de jQuery pour filtrer et formater les données. Voici un exemple :

$.ajax({
  type: "GET",
  url: "/api/data",
  success: function(data) {
    $('body').html(data);
    var htmlData = $('div#data').html();
    console.log(htmlData);
  },
  error: function(error) {
    console.log(error);
  }
});

Parmi eux, en supposant qu'il existe un élément div avec l'ID des données dans les données HTML renvoyées par le backend, nous pouvons utiliser la méthode find de jQuery pour trouver l'élément et obtenir les données qu'il contient.

4. Autres méthodes de formatage

En plus des méthodes ci-dessus, il existe d'autres méthodes de formatage, telles que CSV, TXT et d'autres formats. Nous pouvons choisir la méthode de formatage appropriée pour traiter les données acquises en fonction de la situation spécifique.

3. Résumé

Cet article explique comment utiliser la méthode AJAX de jQuery pour obtenir des données et formater les données obtenues. Lorsque les données que nous obtenons du backend ne sont pas dans le format souhaité, nous pouvons utiliser les méthodes ci-dessus pour analyser et formater les données afin de les rendre plus adaptées à l'affichage et au traitement front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!