To send data, use a different method (usually POST) and put the data in the request body.
script.js
JS
const response = await fetch("https://api.example.com/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Maya", email: "maya@example.com" })
});
if (!response.ok) throw new Error("HTTP " + response.status);
const created = await response.json();The three options
| Option | Purpose |
|---|---|
method | "POST", "PUT", "PATCH", "DELETE" (the default is "GET") |
headers | metadata, here Content-Type tells the server the body is JSON |
body | the data, as a string (or FormData, Blob…) |
The body must be a string, so JSON.stringify the object. Passing an object directly would send "[object Object]".
Try the idea without a server
script.js
JS
// This builds the same request a real call would send, so you can see what goes over the network
const request = new Request("https://api.example.com/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Maya", age: 28 })
});
async function show() {
console.log(request.method); // → POST
console.log(request.headers.get("Content-Type")); // → application/json
console.log(await request.text()); // → {"name":"Maya","age":28}
}
show();A reusable helper
script.js
JS
async function postJSON(url, data) {
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error(`Request failed (${response.status})`);
}
return response.json();
}
const user = await postJSON("/api/users", { name: "Maya" });Submitting a form
index.html
HTML
<form id="signup">
<input name="email" type="email" required>
<button>Join</button>
</form>
script.js
JS
document.querySelector("#signup").addEventListener("submit", async event => {
event.preventDefault();
const data = Object.fromEntries(new FormData(event.target));
try {
const result = await postJSON("/api/join", data);
console.log("Welcome", result.name);
} catch (error) {
console.error(error.message);
}
});See Handling Form Submit and FormData.
Sending FormData and files
Pass the FormData as the body and leave out Content-Type. The browser adds it, with the correct boundary.
script.js
JS
await fetch("/upload", { method: "POST", body: new FormData(form) });Other methods
| Method | Typical use |
|---|---|
GET | read |
POST | create |
PUT | replace |
PATCH | update part |
DELETE | remove |
script.js
JS
await fetch("/api/users/7", { method: "DELETE" });
lightbulb
Never trust the browser alone
The server must validate everything it receives, and protect POST requests against abuse (authentication, CSRF protection, rate limits). That is server-side work, but keep it in mind when you design forms.