ページ遷移を行なった後、再度POSTリクエストを行いたい

前提・実現したいこと

現状、index.htmlにて、formからURLを入力し、送信を行うと、「http://127.0.0.1:8000/polls/check/」に遷移します。しかし、そこでリロードをかけると以下のエラーが発生してしまいます。

Page not found (404)
Request Method:	GET
Request URL:	http://127.0.0.1:8000/polls/check/
Using the URLconf defined in wp_tool.urls, Django tried these URL patterns, in this order:

polls/ [name='index']
polls/ <int:question_oo>/ [name='detail']
polls/ check [name='check']
admin/
The current path, polls/check/, didn't match any of these.

You're seeing this error because you have DEBUG = True in your Django settings file. Change that to False, and Django will display a standard 404 page.

こちら、GETでのアクセスとなっているのですが、こちらを「POST」リクエストとして、再度formからのリクエストとして、制御したいと考えています。

該当のソースコード

以下は、index.htmlです。

html
1{% load static %}
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
7    <link rel="stylesheet"　type="text/css" href="{% static 'polls/css/style.css' %}">
8    <title>demo</title>
9</head>
10<body>
11    <div class="loader hidden" id="loading">Loading...</div>
12    <form id="form" action="{% url 'polls:check' %}" method="post">
13        {% csrf_token %}
14        <input type="url" name="check_url" placeholder="http://example.com"/>
15        <!-- <button type="submit" name="check" value="send">送信</button> -->
16        <button type="button" onclick="sendData()">送信</button>
17    </form>
18    <script src="{% static 'polls/js/app.js' %}"></script>
19</body>
20</html>

以下は、check.htmlです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>check.htmlです</p>
    <p>{{ alert_msg.err_test }}</p>
</body>
</html>

以下は、views.pyです。

def index(request):
    return render(request,'polls/index.html')
def check(request):
    
    if request.method == "GET":
        return redirect("polls:index")
    input_url = request.POST['check_url']
    print(input_url)

#諸々の処理

    return render(request,'polls/check.html',{'alert_msg':alert_msg})

以下は、app.jsです。


function showElement(e) {
    e.classList.remove("hidden");
  }
  
function hideElement(e) {
    e.classList.add("hidden");
}

async function sendData() {

    // ローディング画面を表示する
    showElement(document.getElementById("loading"));

    //formデータを取得
    let formElem = document.getElementById("form")
    // console.log(formElem)
    let formUrl =　formElem.action;
    let formData = new FormData(formElem);

    // console.log(formData)

    let response = await fetch(formUrl, {
        method: 'POST',
        body: formData
      });

    // ローディング画面を隠します
    hideElement(document.getElementById("loading"));

    if(response.ok){
        //成功の場合の処理
        console.log(response)
        document.open();
        document.write(await response.text());
        
        document.close();
        // 前のページへ正しく戻れるようページ歴史に追加する
        history.pushState(null, "", "/polls/check/");

    }else{
        //失敗の場合の処理

    }

  }

追記です
現状、修正を行いたい点がもう一つあります。

以下は、http://127.0.0.1:8000/polls/の画面になります。

こちらのindex.htmlからformに値を入力し、送信ボタンを押した際には、以下の画面が表示されます。

こちらのアドレスはhttp://127.0.0.1:8000/polls/check/です。しかし、ブラウザの戻るボタンを押した際にもこちらのcheck.htmlが表示されてしまいます。

上記画像は、戻るボタンを押した際の画面ですが、http://127.0.0.1:8000/polls/check/で表示されていた内容と同じ内容が表示されてしまっている状況です。

YufanLou

2020/07/07 05:40

def check(request): if request.method == "GET": return redirect("polls:index") ここを見ると、/polls/checkでリロードしたらindexへリダイレクトされるはずです。どうして404が出ましたか？他のエラーがありましたか？

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

前提・実現したいこと

該当のソースコード

関連した質問