V mém předchozím článku jsme se podívali na to, jak vytvořit požadavek HTTP POST pomocí XMLHttpRequest (XHR) ve vanilla JavaScript. Vzhledem k tomu, že nejběžnější použití XHR je pro odesílání asynchronního požadavku s datovou částí JSON, je dobré vědět, jak na to.
JSON je zkratka pro JavaScript Object Notation a je oblíbeným formátem pro sdílení dat se serverem a zobrazení výsledku zpět klientovi.
Následující příklad ukazuje, jak můžete použít XHR k vytvoření požadavku JSON POST v JavaScriptu:
const xhr = new XMLHttpRequest();
// listen for `load` event
xhr.onload = () => {
// print JSON response
if (xhr.status >= 200 && xhr.status < 300) {
// parse JSON
const response = JSON.parse(xhr.responseText);
console.log(response);
}
};
// create a JSON object
const json = {
"email": "[email protected]",
"password": "cityslicka"
};
// open request
xhr.open('POST', 'https://reqres.in/api/login');
// set `Content-Type` header
xhr.setRequestHeader('Content-Type', 'application/json');
// send rquest with JSON payload
xhr.send(JSON.stringify(json));
Podívejte se na vytváření požadavků HTTP pomocí výukového programu XHR, kde se dozvíte o všech dostupných možnostech.
Použití rozhraní Fetch API
Pokud pracujete s moderními prohlížeči Pouze bych navrhoval použití Fetch API místo XHR. Má jasnou a stručnou syntaxi a také podporuje sliby:
// create a JSON object
const json = {
email: '[email protected]',
password: '123abc'
};
// request options
const options = {
method: 'POST',
body: JSON.stringify(json),
headers: {
'Content-Type': 'application/json'
}
}
// send post request
fetch('/login', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));