Flaskのサーバーを使用していますが、画面遷移ができません。

前提・実現したいこと

発生している問題

現在、下記の文献を参考にして
ブラウザからボタンを押下してから、「FormData」と「Ajaxによる非同期通信」を利用して
Flaskにテキストデータを送るところまではできましたが、画面遷移ができません。
具体的に言うと、下記のコードに記載してある「hoge_Page.html」に遷移できません。

【Javascript to flask】FormDataを送信/受信する方法【お家IT#6】

現状のソースコード

まずファイル構成は以下の通りです。

files
1├── __pycache__
2│   ├── Log.cpython-36.pyc
3│   └── Log.cpython-37.pyc
4├── cert.crt
5├── connect.ini
6├── server_pub.csr
7├── server_secret.key
8├── static
9│   └── textSend.js
10├── templates
11│   ├── hoge_Page.html
12│   ├── index.html
13│   └── textButton.html
14└── webServer.py

まずこちらがテキスト送信用画面です。

textButton
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7</head>
8
9<body>
10    <form>
11        <button onclick="textToFlask();">送信</button>
12    </form>
13    <script src="/static/textSend.js"></script>
14</body>
15
16</html>

次にこちらがテキスト送信用のコードです

textSend
1function textToFlask() {
2        var text1 = "Hello World"
3        var fData = new FormData();
4        fData.append('text1', text1);
5
6        //ajax送信
7        $.ajax({
8            url: '/hoge_Page',
9            type: 'POST',
10            data: fData,
11            contentType: false,
12            processData: false,
13            success: function(data, dataType) {
14                //非同期で通信成功時に読み出される [200 OK 時]
15                console.log('Success', data);
16            },
17            error: function(XMLHttpRequest, textStatus, errorThrown) {
18                //非同期で通信失敗時に読み出される
19                console.log('Error : ' + errorThrown);
20            }
21        });
22
23        var startMsec = new Date();
24        // 指定ミリ秒間だけループさせる（CPUは常にビジー状態）
25        while (new Date() - startMsec < 5000);
26
27        window.location.href = '/hoge_Page';
28}

最後にこちらがサーバー用のコードです。

webServer
1# -*- coding: utf-8 -*-
2from flask import Flask, render_template, request
3import ssl
4
5app = Flask(__name__)
6context = ssl.SSLContext(ssl.PROTOCOL_TLSv1_2)
7context.load_cert_chain('cert.crt', 'server_secret.key')
8
9@app.route("/")
10def index():
11    return render_template('index.html')
12
13@app.route("/textPass")
14def textPass():
15    return render_template('textButton.html')
16
17@app.route('/hoge_Page', methods=['POST'])
18def set_data():
19    text1 = request.form['text1']
20    print(text1)
21    return render_template('hoge_Page.html')
22
23if __name__ == "__main__":
24    app.run(host='0.0.0.0', port=800, ssl_context=context,
25            threaded=True, debug=True)
26

試したこと

下記のようにコードを修正してみましたが、結果は変わりませんでした。


@app.route('/hoge_Page', methods=['POST'])
def set_data():
    text1 = request.form['text1']
    print(text1)
    return render_template('hoge_Page.html')

↓↓↓↓↓↓↓↓↓↓

@app.route('/hoge_Page', methods=['POST'])
def set_data():
    text1 = request.form['text1']
    print(text1)
    return redirect('hoge_Page.html')

補足情報

使用しているWebサーバー：
Raspberry Pi 4 Computer Model B

サーバーのOS情報：
Distributor ID:　Raspbian
Description:　Raspbian GNU/Linux 10 (buster)
Release:　10
Codename:　buster

参考にした文献

【Javascript to flask】FormDataを送信/受信する方法【お家IT#6】

行動規範の内容に同意します

回答1件

自己解決

自己解決できました。
何点かコードを書き換えました。

まずwebServer.pyに以下のコードを追加しました。

webServer
1@app.route('/page3')
2def move_page():
3    return render_template('hoge_Page.html')

次に以下の二つのコードを書き換えました。
変更前のものはコメントアウトしています。

textButton
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <title>テキスト送信</title>
7    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8</head>
9
10<body>
11
12    <h1>テキスト送信</h1>
13    <form>
14        <!-- <button onclick="textToFlask();">送信</button> -->
15        <input type="button" id="send" value="送信" onclick="textToFlask();" />
16    </form>
17    <script src="/static/textSend.js"></script>
18</body>
19
20</html>

textSend
1function textToFlask() {
2    var text1 = "Hello World"
3    var fData = new FormData();
4    fData.append('text1', text1);
5
6    //ajax送信
7    $.ajax({
8        url: '/hoge_Page',
9        type: 'POST',
10        data: fData,
11        contentType: false,
12        processData: false,
13        success: function (data, dataType) {
14            //非同期で通信成功時に読み出される [200 OK 時]
15            console.log('Success', data);
16        },
17        error: function (XMLHttpRequest, textStatus, errorThrown) {
18            //非同期で通信失敗時に読み出される
19            console.log('Error : ' + errorThrown);
20        }
21    });
22
23    var startMsec = new Date();
24    // 指定ミリ秒間だけループさせる（CPUは常にビジー状態）
25    while (new Date() - startMsec < 5000);
26
27    location.href = '/page3'
28}