muiyuta
@muiyuta (yuta mui)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

views.pyからreturn(httpresponse)が返ってきたか判定したい

DjangoでWebアプリケーションを作成している際に、不明点が発生しましたのでご存じの方、ご教示頂けるとありがたいです。

【不明点】
1.return responseが返ってくるまでの読み込み中にローディング画面を表示させる
2.javascriptでのローディング判定

views.py

def Tool_extractView(request):
    if request.method == 'POST':

        upload = UploadForm(request.POST, request.FILES)

        if upload.is_valid():
            form_data = upload.cleaned_data
            file, code, columuns = form_data["file"], form_data["code"], form_data["columuns"]

            #処理

            type_data = 'text/csv; charset=' + enc
       response = HttpResponse(content_type=type_data)
            response['Content-Disposition'] = 'attachment; filename="result.csv"'
            df.to_csv(path_or_buf = response, encoding = enc, index=False)
            
            return response #処理後のCSV出力

index.html

<div class="loader_modal">
    <div class="loader">
        <h2>Now loading...</h2>
    </div>
</div>

<form method="POST" class="form" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="file-upload-wrapper">
        <p>ファイルを選択<br>
            {{ form.file }}
        </p>
        <p>基準とする列名を入力<br>
            {{ form.columuns }}
        </p>
        <p>キーワードを入力(半角パイプ「|」区切りで複数指定可能)<br>
            {{ form.code }}
        </p>
    </div>
    <button type="submit" class="save btn btn-outline-primary" id="indicator">実行</button>
</form>

style.css

.loader_modal {
    position: fixed;
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 4;
}

.loader {
    position: relative;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader_modal h2 {
    color: black;
    font-size: 30px;
}

この場合、javascriptでresponseのリターンがviews.pyから返ってきたか判定する方法はありますでしょうか?

0

1Answer

JavaScriptでレスポンスを受け取るなら、リクエストをJavaScriptで行う必要があります。
formをsubmitするのではなく、JavaScriptによる非同期通信(AJAX)です。

AJAX でできることには、二つの重要な特徴があります。

  • ページを再読み込みすることなくサーバーに要求を送る
  • サーバーからデータを受け取って処理する
1Like

Comments

  1. @muiyuta

    Questioner

    ご回答いただき、ありがとうございます。
    非常に参考になりました。
    感謝いたします。

Your answer might help someone💌