Flask jsからデータをPythonに送信し、Python側で更新、削除等してトップ画面遷移したいが出来ない。

前提・実現したいこと

FlaskでJavascriptからデータをPythonに送信し、Python側で更新、削除等してトップ画面遷移したいのですが、エラーは出ず、画面遷移がされません。
データ更新、削除は検証済みです。
更新、削除した後の処理で「return redirect(url_for('index'))」にてトップ画面
に遷移して更新または削除した後のデータ一覧を表示されるようにしたいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link href="static/lib/bootstrap-5.1.1-dist/css/bootstrap.min.css" rel="stylesheet"></link>
8    <link href="static/css/book.css" rel="stylesheet"></link>
9    <script type="text/javascript" src="static/js/book.js"></script>
10    <title>編集</title>
11</head>
12<body>
13    <h1>FLASK書店</h1>
14    <h2>新刊一覧（編集画面）</h2>
15    {% if books==[] %}
16        <p>・今月は新刊発売はありません。</p>
17    {% else %}
18        <table>
19            <tr class="title" style="text-align: center;">
20                <td style="width: 20%">タイトル</td>
21                <td style="width: 20%">値段</td>
22                <td style="width: 25%">発売日</td>
23                <td style="width: 20%">変更</td>
24            </tr>
25            {% for book in books %}
26            <tr>
27                <td><input type="text" tag="{{ loop.index }}" value="{{ book. title }}"></input></td>
28                <td tag="{{ loop.index }}"><P>{{ book. price }}円</P></td>
29                <td tag="{{ loop.index }}"><P>{{ book.to_date }}</P></td>
30                <td><button class="btn btn-success btn-sm" style="margin: 5px;" tag="{{ loop.index }}" disabled=disabled onclick="addAjax(event)">追加</button></td>
31            </tr>
32            {% endfor %}
33        </table>
34    {% endif %}
35</body>
36</html>

js
1//更新ajax通信処理
2const addAjax = async function(e) {
3　　//afterListにtitleとidが格納されている
4    var json = JSON.stringify(afterList);
5    //Asyncによる非同期通信処理
6    var res = await fetch("/register",
7    {
8        method: 'POST',
9        headers: {'Content-Type' : 'application/json'},
10        body: json
11    });
12    if(res.ok){
13        console.log("更新完了");
14    }else{
15        console.log("Ajax通信エラー")
16    }
17}

mainpy
1@app.route('/', methods=['GET', 'POST'])
2###  初期表示処理  ###
3def index():
4    books = []
5    ### 本情報を取得 ###
6    books = db.select()
7    ### commonフォルダcommon情報を取得 ###
8    common.ok()
9
10    return render_template(
11        "index.html",
12        books=books
13    )
14
15###  データ更新処理  ###
16@app.route('/register', methods=['POST'])
17def register():
18    if(request.method=='POST'):
19        if(request.headers['Content-Type'] == 'application/json'):
20            #タイトル
21            title = request.json["title"]
22            #ID
23            id = request.json["id"]
24            print("データ取得：" + title)
25            ### 編集情報を更新 ###
26            result = db.update(title, id)
27        //トップ画面遷移したい
28        return redirect(url_for('index'))

dbpy
1### 編集したデータをupdateする ###
2def update(title, id):
3    engine = create_engine("postgresql://{user}:{password}@{host}:{port}/{database}"
4                           .format(**connection_config))
5    with engine.connect() as con:
6        con.execute("UPDATE booklist SET name = %s WHERE id = %s", [title, id])
7        return True

説明下手ですが、分かる方がいらしたら宜しくお願い致します。

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

回答1件

ベストアンサー

Flask側でreturn redirect(url_for('index'))と書いてもfetchでアクセスしたら遷移しません。
return redirect(url_for('index'))で遷移したい場合は、formやurlにパラメータを設定するなどの方法でアクセスしてください。
fetch等を使ってajaxでアクセスし、ページ遷移したい場合はJavaScript側で遷移に対応してください。
その際、redirectを使うのでは無く、結果(成功/失敗)をjson形式で返すなど、JavaScript側が成功したのか失敗したのかを判断できるようなリターンを返してあげると分かり安いと思います。
JavaScript側で対応というのは以下の記事のようなものでやってくでださいと言う事です。
https://qiita.com/shuntaro_tamura/items/99adbe51132e0fb3c9e9
というか、ajax使う場合は遷移しないのが売りみたいなものなので、やりたいことと使用している技術がマッチしていない可能性があります。

mainpyの //トップ画面遷移したいですが、ご存じの通りpythonのコメントは#です。
このコードは動作しません。
質問する場合は動作する最低限のコードを提示ください。
その際、DB更新に関係が無いとわかっていればDB部分を省くなど、回答者がわかりやすい様にしていただくと回答が増えるかもしれません。

dbの定義が無いのでどうやって動かせば良いのかわかりませんので、その辺は全部コメントアウトして実行しましたが、var json = JSON.stringify(afterList);のafterListが無いと言われました。
afterListを適当に'aaa'に置き換えて送信したところ送信できたので、afterListが定義されていないか、中身がおかしいかの可能性があります。
ご確認ください。

投稿2021/09/22 01:17