<後記、2021年5月6日>
全体像として、何をやりたかったを、Githubに記載しました。
宜しかったら、眺めてください。改めて、皆さま、ありがとうございました。
https://github.com/kazu0116/web_application
=====================
HTMLと言うか、Jinja2の書き方の問題と言う気がするのですが、どうしても分かりません。
教えてください。
<背景>
Python Flaskを使用して、DB(mysql)サーバから、データを引っ張ってきて、HTMLに表示すると言う、下記の様なシステムを開発しております。
1)ユーザーは、HTML(index.html)上で、旅行したい国のチェックボックスにチェックを入れて(複数選択も可)、送信ボタンをクリックする。
![
2)選択された国の旅行情報を、DBから引っ張ってきて、コンソール上に表示すると共に、HTML(index1.html)に表示する。
<説明>
試行錯誤した結果、pythonの方は、下記の様なコードにたどり着きました。
from flask import Flask, render_template,request import pymysql app = Flask(__name__) @app.route('/', methods=['GET']) def get(): return render_template('index.html', \ title = 'Form Sample(get)', \ message = 'Where do you want to go?') def getConnection(): return pymysql.connect( host='localhost', db='first_db', user='root', password='password', charset='utf8', cursorclass=pymysql.cursors.DictCursor ) @app.route('/', methods=['POST']) def select_sql(): connection = getConnection() message = "test" names = request.form.getlist('checkbox') for name in names: cursor = connection.cursor() sql = "select Country, Agency, email from tb3 where Country=%s"; cursor.execute(sql, (name,)) list1s = cursor.fetchall() #TakaiYさんのコメントを受け、誤字修正 print(list1) #コンソール上での動作確認用 cursor.close() connection.close() return render_template( 'index1.html', list1s = list1s) if __name__ == '__main__': app.run()
コンソール上への表示は、1つの国を選択した場合も、複数の国を選択した場合も、期待した通りのデータを返してきます。(ここまでは、OK。下記は、3か国を選択した場合のコンソール表示。)
<コンソール上では表示される>
[{'Country': 'Australia', 'Agency': 'DEF Travel', 'email': '456@yahoo.com'}]
[{'Country': 'England', 'Agency': 'GHI Travel', 'email': '789@hotmail.com'}]
[{'Country': 'France', 'Agency': 'JFK Travel', 'email': '1111@yahoo.co.jp'}]
<質問>
上記の様に、コンソール上には、問題なく表示されておりますが、HTML上で表示が上手くいきません。
(複数項目を選択した場合、最後にチェックした国(上記の例では、フランス)しか、HTML上で表示できません。)
<index1.htmlのコードは下記>
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>test_list</title> </head> <body> <h1>{{ title }}</h1> {% block content %} {% for list1 in list1s %} <p>{{list1}}</p> {% endfor %} {% endblock %} --!> </form> </body> </html>
複数項目を表示(HTML上に)させる為には、HTML(index1.html)をどの様に書けば良いのでしょうか?
丸2日間、色々と試したのですが、どうしても上手くいきません。
よろしくお願いいたします。
************
2021年5月3日、TakaiYさんのアドバイスに基づき、解決しております。
最終コードは下記です。(御参考まで)
- pythonのコード
from flask import Flask, render_template,request import pymysql app = Flask(__name__) @app.route('/', methods=['GET']) def get(): return render_template('index.html', \ title = 'Form Sample(get)', \ message = 'Where do you want to go?') def getConnection(): return pymysql.connect( host='localhost', db='first_db', user='root', password='yireozna', charset='utf8', cursorclass=pymysql.cursors.DictCursor ) @app.route('/', methods=['POST']) def select_sql(): connection = getConnection() message = "test" names = request.form.getlist('checkbox') list1s=[] for name in names: cursor = connection.cursor() sql = "select Country, Agency, email from tb3 where Country=%s"; cursor.execute(sql, (name,)) list = cursor.fetchall() list1s.append(list1) cursor.close() connection.close() print(list1s) #コンソール上で、キチンとデータが取得できているかどうかの確認用 return render_template( 'index1.html', list1s = list1s) if __name__ == '__main__': app.run()
2.index.htmlのコード
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello World</title> </head> <body> <h1>{{ title }}</h1> <p>{{ message }}</p> <form action="/" method="POST" enctype="multipart/form-data"> <div> <label for="ck1">Afgahanistan:</label> <input type="checkbox" id="ck1" name="checkbox" value="Afgahanistan"> </div> <div> <label for="ck2">Australia:</label> <input type="checkbox" id="ck2" name="checkbox" value="Australia"> </div> <div> <label for="ck3">England:</label> <input type="checkbox" id="ck3" name="checkbox" value="England"> </div> <div> <label for="ck4">France:</label> <input type="checkbox" id="ck4" name="checkbox" value="France"> </div> <div> <input type="submit" value="送信"> </div> </form> </body> </html> 3.index1.htmlのコード ```ここに言語を入力 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello World</title> </head> <body> <h1>{{ title }}</h1> {% block content %} {% for list1 in list1s %} <p>{{loop.index}}:{{list1}}</p> {% endfor %} {% endblock %} </form> </body> </html>コード
4.mysqlのtb3のテーブル内容
mysql> select * from tb3;
+--------------+------------+------------------+
| Country | Agency | email |
+--------------+------------+------------------+
| Afgahanistan | ABC Travel | 123@gmail.com |
| Australia | DEF Travel | 456@yahoo.com |
| England | GHI Travel | 789@hotmail.com |
| France | JFK Travel | 1111@yahoo.co.jp |
+--------------+------------+------------------+
4 rows in set (0.00 sec)
回答1件
あなたの回答
tips
プレビュー