2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

jQueryを使わずにDjangoでAjax!

Last updated at Posted at 2019-02-22

こんちは。

ここ数年で、フロントエンド界隈には反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&param2=data2...');
request.onload = function () {
   // 正常に受信完了した時の処理
   const d = this.response; // これで帰ってきたデータを取り出せます
}
request.send(data); // この時点で送信されます

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

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?