Comment résoudre l'erreur « Jeton inattendu : » lors de l'utilisation de jQuery.ajax pour récupérer JSON à partir de Node.js ?

Jeton inattendu Colon JSON dans jQuery.ajax#get

Problème :

Lors de l'utilisation jQuery.ajax#get pour récupérer des données JSON à partir d'une API Node.js, une erreur "Jeton inattendu :" se produit dans Chrome.

Contexte :

• Code côté serveur : Un serveur Node.js Express renvoie les données JSON au format : {"Name": "Tom", "Description": "Bonjour, c'est moi!"}.
• Code côté client :Une requête get AJAX est effectuée dans un script jQuery pour récupérer les données JSON.

Enquête :

L'examen de l'erreur dans Chrome suggère que la réponse JSON contient un deux-points inattendu (:).

Solution :

Activation de la prise en charge JSONP :

Le problème survient car le client attend une réponse JSONP, qui est des données JSON enveloppées dans un appel de fonction JavaScript. Pour activer la prise en charge de JSONP, le serveur doit inclure le « Padding » (« P ») dans la réponse.

<code class="text">jQuery111108398571682628244_1403193212453({"Name":"Tom","Description":"Hello it's me!"})</code>

Modification du code côté serveur :

Pour prend en charge JSONP dans Node.js Express, modifiez le code du serveur comme suit :

const express = require('express');
const app = express();

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

  if (callback) {
    res.setHeader('Content-Type', 'text/javascript');
    res.end(callback + '(' + JSON.stringify(data) + ')');
  } else {
    res.json(data);
  }
});

Alternative :

Utilisez la méthode res.jsonp() intégrée d'ExpressJS :

const express = require('express');
const app = express();

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

Modification du code côté client :

Aucune modification n'est requise côté client. Par défaut, jQuery transmettra le paramètre de chaîne de requête de rappel avec le nom de la fonction.

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!