Comment résoudre l'erreur « Jeton inattendu Colon JSON après jQuery.ajax#get » ?

'Jeton inattendu Colon JSON après jQuery.ajax#get' : un guide complet

Introduction

Ce problème survient lorsque vous tentez d'effectuer une requête AJAX à l'aide de jQuery et recevez des données d'un serveur qui renvoie JSON dans un format incompatible avec la configuration de la requête. Cela peut être frustrant, mais comprendre la cause première et appliquer la solution appropriée peut le résoudre.

La cause profonde

L'erreur « Jeton inattendu colon JSON après jQuery. ajax#get" se produit lorsque le serveur renvoie des données JSON sans remplissage approprié ni paramètre de chaîne de requête de rappel. JSONP (JSON with Padding) est une technique utilisée lors des requêtes d'origine croisée, où le serveur encapsule les données JSON dans un appel de fonction pour éviter les restrictions de sécurité du navigateur. Cependant, si le serveur ne parvient pas à inclure le paramètre de remplissage ou de rappel, le navigateur interprétera la réponse comme un JSON non valide.

La solution

Pour résoudre ce problème, vous devez vous assurer que le serveur génère correctement les réponses JSONP. Cela signifie envelopper les données JSON dans un appel de fonction et garantir l'inclusion du paramètre de rappel dans la chaîne de requête.

Dans Node.js Express

Dans Node.js Express, vous pouvez utiliser la méthode res.jsonp() pour générer des réponses JSONP :

app.get('/', (req, res) => {
  res.jsonp({
    Name: 'Tom',
    Description: 'Hello it's me!'
  });
});

Alternativement, vous pouvez ajouter manuellement le paramètre de remplissage et de rappel :

const callback = req.query.callback;
const data = JSON.stringify({
  Name: 'Tom',
  Description: 'Hello it's me!'
});

if (callback) {
  res.setHeader('Content-Type', 'text/javascript');
  res.end(`${callback}(${data})`);
} else {
  res.setHeader('Content-Type', 'application/json');
  res.end(data);
}

Dans jQuery

Côté client, vous pouvez configurer votre requête AJAX pour utiliser JSONP en spécifiant l'option dataType : 'jsonp' :

$.ajax({
  url: findUrl,
  type: 'get',
  dataType: 'jsonp',
  success: (data) => {
    // ...
  },
  error: (jqXHR, textStatus, errorThrown) => {
    // ...
  }
});

Conclusion

En vous assurant que le serveur génère correctement les réponses JSONP et que le client configure sa requête AJAX de manière appropriée, vous pouvez éviter l'erreur « Jeton inattendu deux points JSON après jQuery.ajax#get » et récupérer avec succès les données JSON de votre serveur. .

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!