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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Jinja2

Jinja2は、Python用のテンプレートエンジンです。テンプレートファイルの読込や文字列の埋込、分岐/ループの制御文のサポートなどの機能を持ちます。HTMLやXML生成によく使用されますが、どのような文書でも生成することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3630閲覧

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

Python_com.jp

総合スコア1

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Jinja2

Jinja2は、Python用のテンプレートエンジンです。テンプレートファイルの読込や文字列の埋込、分岐/ループの制御文のサポートなどの機能を持ちます。HTMLやXML生成によく使用されますが、どのような文書でも生成することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/09/21 13:17

前提・実現したいこと

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

FiroProchainezo

総合スコア2392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Python_com.jp

2021/09/22 01:50

色々と不備があるみたいですね。 詳しい説明ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問