こんちは。

ここ数年で、フロントエンド界隈には反jQueryな方々が増えてることを知りました。
私はそこまでこだわりはないんですけどね、せっかくなら動作は軽いほうがいいし、素のJavascriptだけでAjaxができたらいいよねってことで。

ただ、Djangoの公式にもjQueryの例しか載ってないからチョット苦労しました…
とりあえず形にはなったので、忘れないように書いときます。

方法

DjangoにおけるAjaxは、GETは簡単なのですが、POSTについてはheaderにcsrftokenをくっつけないと怒られてしまうのです。
このトークンはCookieから取り出さないといけないので、公式の通りにjs-cookieを導入しといてください。

1. POST

// 送信データを用意します
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

const request = new XMLHttpRequest();

request.open('GET', '送信先のurl?param1=data1&param2=data2...');
request.onload = function () {
   // 正常に受信完了した時の処理
   const d = this.response; // これで帰ってきたデータを取り出せます
}
request.send(data); // この時点で送信されます

以上です。以上のはずです…

ミスがあったら教えてくださいな。

jQueryを使わずにDjangoでAjax！

方法

1. POST

2. GET