POST et envoi de données
Envoyez des charges utiles JSON avec les options de requête.
POST et envoi de données est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Envoyer des données à un serveur
Pour créer ou mettre à jour des données, vous envoyez une requête avec un corps. Fetch prend cela en charge grâce à l’objet d’options transmis comme deuxième argument.
Définir la méthode
Définissez method sur le verbe HTTP dont vous avez besoin : POST pour créer, PUT/PATCH pour mettre à jour et DELETE pour supprimer.
fetch(url, { method: "POST" });Ajouter un corps JSON
La plupart des API attendent du JSON. Convertissez votre objet en chaîne avec JSON.stringify et placez-le dans body.
fetch(url, {
method: "POST",
body: JSON.stringify({ name: "Ada", age: 36 })
});L’en-tête Content-Type
Indiquez au serveur que le corps est au format JSON en définissant Content-Type: application/json. Sans cette information, le serveur risque de mal interpréter la charge utile.
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Ada" })
});Lire la réponse
Le serveur répond généralement avec la ressource créée. Lisez-la comme pour une requête GET, avec response.json().
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const created = await response.json();Fonction complète de création
Regroupez le modèle dans une fonction réutilisable. Elle accepte des données, les envoie et renvoie la réponse du serveur.
async function createUser(data) {
const res = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
return res.json();
}PUT et PATCH
Utilisez PUT pour remplacer entièrement une ressource et PATCH pour ne mettre à jour que certains champs. La structure du corps diffère en conséquence.
fetch("/api/users/7", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ age: 37 })
});Envoyer des données de formulaire
Pour envoyer des fichiers ou des formulaires, utilisez un objet FormData comme corps. Ne définissez PAS vous-même le type de contenu : le navigateur ajoute la limite multipart correcte.
const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });Authentification
Les points de terminaison protégés nécessitent des identifiants. Envoyez un jeton dans l’en-tête d’autorisation, avec le type de contenu.
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify(data)
});Cookies et identifiants
Par défaut, la fonction de récupération n’envoie pas les cookies entre des origines différentes. Définissez credentials: "include" lorsque le serveur utilise des sessions fondées sur des cookies.
fetch(url, { method: "POST", credentials: "include", body: payload });Pièges de la sérialisation
N’oubliez pas : body doit être une chaîne (ou un objet FormData/Blob). Transmettre un objet brut envoie [object Object]. Utilisez toujours JSON.stringify d’abord pour les objets.
body: JSON.stringify({ ok: true }) // correct
// body: { ok: true } <-- brokenVérification rapide
Envoyer des données JSON avec POST.
Récapitulatif
Envoyez des données en définissant method, un body et des en-têtes. Pour le JSON, appliquez JSON.stringify à l’objet et définissez Content-Type: application/json. Utilisez FormData pour les envois de fichiers (sans définir manuellement le type de contenu), ajoutez Authorization pour l’authentification et credentials: "include" pour les cookies. Lisez la réponse avec response.json().
Questions Fréquemment Posées
La leçon « POST et envoi de données » est-elle gratuite ?
Oui — le texte complet de « POST et envoi de données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « POST et envoi de données » ?
Envoyez des charges utiles JSON avec les options de requête. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « POST et envoi de données » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Effectuer des requêtes GET
- POST et envoi de données
- Gérer les erreurs et les codes d’état
- Interrompre des requêtes avec AbortController