Ajaxでサーバーサイドにデータを送る
fetch('/', {
method: 'POST',
headers: {
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: {name: 'test'}
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error("通信に失敗しました。");
}
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('エラー:', error);
});
上の例は、自分のドメインのルートにPOSTメソッドで{name: 'test'}のjson型のデータを送っている例です。
のように記入します。
サーバーサイドから返ってきたデータに対して処理を行うときは
の形式で記入します。
.thenは複数つなげて記入することもできます。
上の例では、1度目のthenで
とし、サーバーサイドから正しくデータが返ってきたときにreturn response.json()でサーバーサイドから受け取った値をjson形式にしています。
次のthenでは引数をdataにし、コンソールログに出力しています。
ここでのdataには前のthenでの戻り値であるresponse.json()が代入されています。
fetch('データを送るURL', {
method: 'データを送るメソッド',
headers: {
ヘッダーの内容
},
body: データを送る内容をjson形式で記入
})
method: 'データを送るメソッド',
headers: {
ヘッダーの内容
},
body: データを送る内容をjson形式で記入
})
のように記入します。
サーバーサイドから返ってきたデータに対して処理を行うときは
.then(サーバーサイドから受け取った値を代入する変数 => {
処理
})
.catch( サーバーサイドからのエラーメッセージを代入する変数 => {
エラー時の処理
})
処理
})
.catch( サーバーサイドからのエラーメッセージを代入する変数 => {
エラー時の処理
})
の形式で記入します。
.thenは複数つなげて記入することもできます。
上の例では、1度目のthenで
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error("通信に失敗しました。");
}
})
if (response.ok) {
return response.json();
} else {
throw new Error("通信に失敗しました。");
}
})
とし、サーバーサイドから正しくデータが返ってきたときにreturn response.json()でサーバーサイドから受け取った値をjson形式にしています。
次のthenでは引数をdataにし、コンソールログに出力しています。
ここでのdataには前のthenでの戻り値であるresponse.json()が代入されています。