こんちは。
ここ数年で、フロントエンド界隈には反jQueryな方々が増えてることを知りました。
私はそこまでこだわりはないんですけどね、せっかくなら動作は軽いほうがいいし、素のJavascriptだけでAjaxができたらいいよねってことで。
ただ、Djangoの公式にもjQueryの例しか載ってないからチョット苦労しました…
とりあえず形にはなったので、忘れないように書いときます。
#方法
DjangoにおけるAjaxは、GETは簡単なのですが、POSTについてはheaderにcsrftokenをくっつけないと怒られてしまうのです。
このトークンはCookieから取り出さないといけないので、公式の通りにjs-cookieを導入しといてください。
###1. POST
.js
// 送信データを用意します
let data = new FormData();
data.append('キー1', '内容');
data.append('キー2', '内容');
.
.
.
const request = new XMLHttpRequest();
request.open('POST', '送信先のurl');
request.setRequestHeader("X-CSRFToken", csrftoken); // csrftokenをくっつけます
request.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// 正常に受信完了した時の処理
const d = this.response; // これで帰ってきたデータを取り出せます
}
};
request.send(data); // この時点で送信されます
###2. GET
.js
const request = new XMLHttpRequest();
request.open('GET', '送信先のurl?param1=data1¶m2=data2...');
request.onload = function () {
// 正常に受信完了した時の処理
const d = this.response; // これで帰ってきたデータを取り出せます
}
request.send(data); // この時点で送信されます
以上です。以上のはずです…
ミスがあったら教えてくださいな。