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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

Python

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

Q&A

解決済

1回答

2004閲覧

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

hekatonkeiru

総合スコア9

Flask

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

Python

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

0グッド

0クリップ

投稿2021/09/17 02:24

編集2021/09/17 02:26

前提・実現したいこと

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】

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

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

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

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

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

guest

回答1

0

自己解決

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

まず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}

投稿2021/09/21 00:24

hekatonkeiru

総合スコア9

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問