DjangoとJavaScript(JS)を使用してリダイレクトさせる方法

Djangoでリダイレクトのレスポンスを返してJavaScript(JS)でリダイレクトさせたい

フロントをJavaScriptやjQueryで書いて、$.ajaxなどでサーバサイドのDjangoとやりとりする場合があります。

その時に、Djangoの処理の条件で、何かの結果を返したりリダイレクト先を返したりしたいときがあるかと思いますが、今回はそのリダイレクト先を返す方法を記載しておきます。

JavaScript

以下のように、#somethingがクリックされた時に、値をDjangoへ送信し、正常に処理が実行されたら、画面をリダイレクトさせます。

$('#something').on('click',function(){
    $.ajax({
        url:postListUrl,
        type:'POST',
        headers: {"X-CSRFToken": getCookie("csrftoken")},
        data: {
            'something': $('#something').val(),
            'something': $('#something').val(),
        }
    })
    .done((response) => {
      window.location.href = response;
    })
});

views.py

通常のredirectではうまくいかない

Djangoの通常のredirectをreturnすると、JavaScript側ではリダイレクト先のHTMLが取得できるだけでうまく画面をリダイレクトさせることはできません。

return redirect('app_name:name')

reverseでURLを返そうとしてもうまくいかない

以下のように、reverseをした結果をreturnすると、xframe_opstions_exemptなどのエラーで、クリックジャッキング？のエラーにハマってリダイレクト先のURLを返せませんでした。

return reverse('app_name:name')

HttpResponseオブジェクトを返す

以下のように、HttpResponseオブジェクトのインスタンス化の時にreverseで名前解決したURLを渡します。

これで、JavaScript側のresponseには、リダイレクト先のURLが入ってくるので、リダイレクトさせればOKです。

from django.urls import reverse, reverse_lazy
from django.http import HttpResponse

class SomethingCreate(generic.TemplateView):
    template_name = 'app_name/something_form.html'
 
    def post(self, request, *args, **kwargs):
        .
        .
        .
        return HttpResponse(reverse('app_name:name'))