Python flaskでJS radioを使いSQliteからデータを取得する

python flaskを使用し、初めてのweb制作に挑戦中でどうしても分からない所があり詰まっています。

やりたい事

・jqueryのradioを使用し、選択部分のみSQLiteサーバーからランダムでデータを取リたい。

現状

submitを押すと下記,変数(p1,p2,p3)が抽出されているのがprintで確認できます。
これを選択部分のみを抽出したいです。

質問該当部分のコードです。

html
1<form action="/login" method = "POST"  >
2  <input type="radio" name="level" id="r1" value="普通の褒め"> 普通の褒め 
3  <input type="radio" name="level" id="r2" value="まあまあの褒め"> まあまあの褒め
4  <input type="radio" name="level" id="r3" value="ぶっ飛んだ褒め">  ぶっ飛んだ褒め</br>
5  <input id="btn" type="submit" value="さあ褒めて" name="save">
6</form>

python
1
2@app.route('/result' ,methods=['GET'])
3def result():
4    
5    conn = sqlite3.connect('homete.db')
6    c = conn.cursor()
7
8    c.execute("SELECT small_word FROM small ORDER BY RANDOM()")
9    p1 = c.fetchone()
10    c.execute("SELECT medium_word FROM medium ORDER BY RANDOM()")
11    p2 = c.fetchone()
12    c.execute("SELECT large_word FROM large ORDER BY RANDOM()")
13    p3 = c.fetchone()
14
15    print (p1)
16    print (p2)
17    print (p3)
18
19    conn.commit()
20    conn.close()
21    
22    return "結果ページにいくよ"

JS
1
2$(function(){
3  $('input[value="普通の褒め"]').prop('checked', true);
4  
5  $('input[name="level"]').change(function() {
6    var result = $(this).val();
7    console.log( result );
8  });
9  
10  $('#btn').click(function() {
11    var r = $('input[name=level]:checked').val();
12    console.log(r);
13  });
14})

https://www.sejuku.net/blog/46739
上記記事などを参考として調べたのですが、上手くできず相談させてもらいました。
ご教授いただければ幸いです。
よろしくお願い致します。

FiroProchainezo

2020/06/23 01:52

何をしたいのかがよくわかりません。参考記事は、フロントエンドのjQueryで値を取得したりチェックを変更したりする操作です。 SQLiteの操作はバックエンドの操作になります。 formの値をPOSTして、POSTされた値に従ってDBからデータを取得し、HTMLに反映するとかでしょうか？それとも、jQeuryでいろいろやっていることから、formのデータをjavascriptで取得し、ajaxなどでPOSTして、そのPOSTされたデータを用いてDBからデータを取得し、jsonあたりでデータを取得する。という感じのことがしたいのでしょうか？いったんやりたいことをまとめて、箇条書きしていただけませんか？

shunsuke5468

2020/06/23 02:14

返答ありがとうございます‼︎ やりたい事は formの値をPOSTして、POSTされた値に従ってDBからデータを取得し、HTMLに反映するとかでしょうか？まさにこの通りでございます。説明が不十分で申し訳ありません。

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

回答1件

ベストアンサー

SQLiteのデータ取得はできているようですので、formの値を取得するところだけ紹介します。

ファイル・フォルダ構造

root
├ templates
　└ index.html
└ app.py

app.py

python
1from flask import Flask, render_template, request, redirect, url_for
2
3app = Flask(__name__)
4
5
6@app.route('/')
7def index():
8    return render_template('index.html')
9
10
11@app.route('/form_post', methods=['POST'])
12def form_post():
13    print(request.form.get('level', None))
14    return redirect(url_for('index'))
15
16
17if __name__ == '__main__':
18    app.run()
19

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6</head>
7<body>
8    <form action="{{ url_for('form_post') }}" method = "POST"  >
9      <input type="radio" name="level" id="r1" value="普通の褒め"> 普通の褒め
10      <input type="radio" name="level" id="r2" value="まあまあの褒め"> まあまあの褒め
11      <input type="radio" name="level" id="r3" value="ぶっ飛んだ褒め">  ぶっ飛んだ褒め</br>
12      <input id="btn" type="submit" value="さあ褒めて" name="save">
13    </form>
14</body>
15</html>