API REST NODEJS + JQUERY (AJAX)

Par Thomas Berthemin, il y a 10 ans

Javascript NodeJS

Bonjour,

Voila je rencontre un petit problème avec mon code.
Actuellement, je bosse sur une API REST en NodeJS (Express.js+Mongoose+MongoDB). Une partie de celle-ci est faîte. Le problème c'est que je veut pouvoir appeller mon API avec des appels AJAX en Jquery.

GET /vehicules Récupère tous les véhicules
GET /vehicules/{id} Récupère tous un véhicule via son identifiant (ex:57100278f91fb013c852c696)
PUT /vehicule Créer un véhicule
POST /vehicules/{id} Modifie le véhicule via son ID (ex:57100278f91fb013c852c696)
DELETE /vehicules/{id} Supprime un véhicule via ID (ex:57100278f91fb013c852c69b)

Mes deux appels GET fonctionne très bien mais pas PUT,POST,DELETE.
Voilà mon appel AJax pour le POST

function putVehicule(){ $.ajax({ url: "http://127.0.0.1:3000/vehicules", type: 'PUT', data: {}, success: function(data) { console.log("PUT !"); } }); }

Et voici ma route :)

app.post('/vehicules/:id', function(req, res){ var idToUpdate = req.params.id.toString(); var Vehicule = require("./models/vehicule.js"); var vehicule = mongoose.model('Vehicule'); var now = new Date(year, month, day, hour, minute, second, millisecond); vehicule.update({_id: idToUpdate},{ $set: { model: 'Modèle mise à jour', date_fabrication: now }}); mongoose.connection.close(); });

Est ce que une personne à une idée de mon problème ? Si oui HELP ME PLEASE x) ?

Merci d'avance

20 réponses

betaWeb, il y a 10 ans

Et quelle erreur t'es retournée ?

tleb, il y a 10 ans

Salut,

La requête est en PUT mais la route est du POST, c'est normal ?

Thomas Berthemin, il y a 10 ans

Bonjour tleb,

Désolé je me suis tromper de fonction. La voici:

''''

function postVehicule(id){
console.log("id", id);
$.ajax({
url: "http://127.0.0.1:3000/vehicules",
type: 'POST',
data: {id: id},
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
success: function(data) {
console.log("POST !");
},
error: function(err, Status){
console.log("Status", Status);
console.log("ERR", err);
}
});
}

''''
Merci !

betaWeb, il y a 10 ans

Salut,

Tu pourrais mieux organiser ton code stp ? Là on ne comprend rien.
Sinon, tu as configuré ExpressJS pour qu'il accepte autre chose que le GET ?

Thomas Berthemin, il y a 10 ans

Désolé, voila le code organiser:

function postVehicule(id){ console.log("id", id); $.ajax({ url: "http://127.0.0.1:3000/vehicules", type: 'POST', data: {id: id}, dataType: "jsonp", contentType: "application/json; charset=utf-8", success: function(data) { console.log("POST !"); }, error: function(err, Status){ console.log("Status", Status); console.log("ERR", err); } }); }

Je débute avec expressJS, j'ai fait des routes pour le PUT,POST et DELETE

betaWeb, il y a 10 ans

Est-ce que tu as une erreur côté node ?

Thomas Berthemin, il y a 10 ans

Non aucune erreur du côté de node, par contre mes appel ajax échoue à chaque fois.

Huggy, il y a 10 ans

As-tu essayé en json plutot que jsonp ?

Thomas Berthemin, il y a 10 ans

Oui j'ai essayé en json mais cela ne change rien.

La seule erreur que cela me retourne est un objet ayant ses valeurs:

readyState 0
responseJSON undefined
status 0
statusText "error"

betaWeb, il y a 10 ans

Ah beh évidemment ! A aucun moment tu ne renvoies les datas ! Tu ne risques pas de les récupérer .......

app.post('/vehicules/:id', function(req, res){ var idToUpdate = req.params.id.toString(); var Vehicule = require("./models/vehicule.js"); var vehicule = mongoose.model('Vehicule'); var now = new Date(year, month, day, hour, minute, second, millisecond); vehicule.update({_id: idToUpdate},{ $set: { model: 'Modèle mise à jour', date_fabrication: now }}); mongoose.connection.close(); // la variable data est un objet JSON contenant ce que tu souhaite retourner au client return res.send(200, data); });
Thomas Berthemin, il y a 10 ans

Encore merci pour ton aide betaWeb. Malgré cela la, le résultat est le même :(

Huggy, il y a 10 ans

Est-ce que tu récupères bien l'id ?
si non alors teste ceci

app.post('/vehicules', function(req, res){ var id = req.body.id

en méthode POST le paramètre ne doit pas faire partie de l'url, il est dans le body

Thomas Berthemin, il y a 10 ans

Merci huggy pour ta réponse, j'ai déjà essayer comme ceci. Dans le navigateur il me met CANNOT GET /vehicules. Et ne passe pas dans mon console.log mis dans ma route POST.

betaWeb, il y a 10 ans

Lorsque tu inspectes, dans l'onglet 'Network' (Chrome), dans les détails de ta requête, la Request Method est bien en POST ? Et le Request Body contient des datas ?

Huggy, il y a 10 ans

Voici ce qui marche chez moi (node v0.12.7)

app.post('/vehicule', function(req, res) { var id = req.param('id', null); res.setHeader('Content-Type', 'text/plain'); res.end('ok ça roule id=' + id); });

Pour tester, côté navigateur, un simple fomulaire en méthod='POST'

Thomas Berthemin, il y a 10 ans

Bonjour,
Encore merci pour votre aide.

J'ai testé ta solution Huggy mais cela fonctionne. J'ai garder mon appel à la fonction "postVehicules" (définies plus haut dans la discussion). Le soucis c'est que il passe dans la fonction "error" de mon appel AJAX.
Voilà ce qui est affiché dans le débogueur:

Object {readyState: 4, responseText: "ok ça roule id=null", status: 200, statusText: "OK"}

Et je ne reçois pas l'id dans ma route.

betaWeb, il y a 10 ans

Pourquoi tu ne débug pas via ton terminal ? Ca irait plus vite ;)

Orodan, il y a 10 ans

Bonjour,

de toute évidence tu as un problème au niveau de ton API, vérifie que toutes les données que tu souhaites récupérer soient bien présentes avant de les renvoyer dans ta réponse. Le fait d'obtenir toujours une erreur à ton appel Ajax peut aussi venir d'un json mal formaté au niveau de tes données.

J'espère que ca t'aidera,

Thomas Berthemin, il y a 10 ans

Bonjour,

Lorsque je fais un "console.log(req.params.id);" j'ai un undefined qui apparait dans mon terminal.
Pour répondre à ta question Orodan, les données que je passe à mon appel AJAX est:

et voilà de nouveau mon appel AJAX:

function postVehicule(){ var data = {"id": 12345678}; $.ajax({ url: "http://127.0.0.1:3000/vehicules", type: 'POST', data: data, dataType: "json", contentType: "application/json; charset=utf-8", success: function(data) { console.log("POST !"); }, error: function(err, Status){ console.log("Status", Status); console.log("ERR", err); } }); }
shadowDZ, il y a 7 ans
  • Dans ton coté serveur (nodejs) tu doit utilisé ce module : app.use(express.json());
  • Dans le coté frent-end avant d'envoyer ton javaObject transforme le en jsonObject avec la function : JSON.stringify(data);
  • C'est ce qui a marché pour moi