FlaskによるMySQLのSELECT実行結果をAjaxで表示させたい

##■質問
同一ページ内において、AjaxによってFlaskのSQL実行結果をボタン押下時に任意のdivに表で非同期的に表示させたいです。

ご不明な点などございましたら、都度補足して参りますので、ヒントなどをお教えいただけると幸いです。
どうぞ宜しくお願い申し上げます。

##■質問に至るまでに自力で実現できた機能

ページ読込と同期的に、FlaskによるSQL実行結果を静的ページに表として表示させる
Ajaxメソッドで単純なテキストを動的に特定のdiv内に表示させる

##参考: 現状のコード群

Flask
1# 同期的にページ読み込み時にSQL結果を表示することはできますが、非同期的にSQL結果を同一ページ内に表示させることができていません。
2@app.route('/products', methods=['GET', 'POST'])
3def products():
4    cur = mysql.connection.cursor()
5
6    resultValue = cur.execute("SELECT * FROM products")
7    if resultValue > 0:
8        productDetails = cur.fetchall()
9        return render_template('products.html', productDetails=productDetails)

HTML
1<!-- ./templates/products.html -->
2<form method="POST">
3    <input type="submit" value="SQL実行">
4</form>
5
6<div id="output">
7<!-- ここ#outputに、上の「SQL実行」ボタン押下時、Ajaxで「SELECT * FROM products WHERE name LIKE '%ソニー%'」（例）の結果を表示させたいです。 -->
8</div>
9
10<!-- ページ読み込み時、Flaskで同期的にSELECT文を表示させることはできました。 -->
11{% for i in productDetails %}
12<tr>
13    <td>{{i[0]}}</td> <!-- id -->
14    <td>{{i[1]}}</td> <!-- category -->
15    <td><a href={{i[3]}} target="_blank">{{i[2]}}</a></td> <!-- name -->
16</tr>
17{% endfor %}

Javascript
1<!-- 作りかけのAjaxメソッド。テキスト表示はできますがSQL結果を表示できていません。 -->
2<script type="text/javascript">
3    $(document).ready(function () {
4        $('form').on('submit', function (event) {
5            $.ajax({
6                // type : 'POST',
7                //   url: '/',
8                //   dataType: 'html',
9                data: {
10                },
11                success: function (data) {
12                    $('#output').text("テキストは表示できますがFlaskでのSQL実行結果のAjax表示ができません。");
13                },
14            });
15            event.preventDefault();
16        });
17    });
18</script>

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

回答1件

ベストアンサー

ajaxの非同期通信でサーバからデータを取得、表示する最低限のコードを考えてみます。

まず、ajax通信用のエンドポイントをflask側に作成します。

python
1# ajaxで呼び出すurl
2@app.route('/asyncdata', methods=['GET', 'POST'])
3def asyncdata():
4    productDetails = [[3,'c0','hoge','hoge'],[4,'c1','hige','hige'],[5,'c2','hage','hage']]
5    return render_template('asyncdata.html', productDetails=productDetails)

データは適当に。product.htmlとは別のテンプレートを返すようにします。

html
1<!-- ./templates/asyncdata.html -->
2<!-- 表の部分だけ -->
3<table>
4{% for i in productDetails %}
5<tr>
6    <td>{{i[0]}}</td> <!-- id -->
7    <td>{{i[1]}}</td> <!-- category -->
8    <td><a href={{i[3]}} target="_blank">{{i[2]}}</a></td> <!-- name -->
9</tr>
10{% endfor %}
11</table>

これで、/asyncdataにアクセスするとtableタグのデータが送信されるようになります。

あとは、ページ側のjavascriptにて上記のurlをajaxで通信するだけです。
submitしないボタンを追加しています。submitするとページ遷移しちゃうので。

javascript
1<form method="POST">
2    <input type="button" value="非同期実行" id="asyncbutton">
3</form>
4
5<script>
6    $('#asyncbutton').on('click',function(){
7        $.ajax({
8            type: 'POST'
9            ,url: 'asyncdata'
10            ,datatype: 'html'
11            ,data:{"id":0}
12        }).done(function(data){$('#output').html(data);})
13    });
14</script>

successコールバックを書くコードは過去の遺物なので使用しない方が良いです。
これで、<div id="#output">の中へasyncdataから取得したhtmlデータが入ります。

こんな感じのひな型を元にDBから取得したデータを加工して表示するコードを考えてみてください。

投稿2020/06/21 14:17

hope_mucci

総合スコア4447

fukazume

2020/06/22 10:55

コードだけでなく、わかりやすいご解説まで加えて頂き、誠にありがとうございます！別のテンプレートに保存するという方法は大変勉強になりました！複数質問は失礼ですので、ここからは独り言レベルのお話なのですが、同一のテンプレート（今回ではproducts.html）内だけで別テンプレは使用せずに同機能を実現する方法なども巷にあるにはあるのでしょうか。それとも世の非同期通信は大なり小なり一時的な別テンプレを使用しているのでしょうか。またその時の長所短所など少し気になりました。いずれにせよ、最高のアドバイスをいただき、誠にありがとうございました！

hope_mucci

2020/06/22 11:03

今回は非同期通信の流れを説明するためにサーバ側でHTMLを作ってクライアント側に丸ごと突っ込む方法でしたが、一般的な方法はjsonデータを送信しクライアント側でjsonからHTMLを構築する方法を取ります。が、一からjqueryで構築するのは割と大変です。それを簡単にするフレームワークがVueとかReactになります。非同期通信によるデータ投入をメインに考えるならVueなどを覚えるのも1つかと思います。

fukazume

2020/06/22 11:49

おっしゃる通り、問題に直面したときググってみてもjsonを送信するサンプルが多くHTMLでの例は少なかったと思います。当問題のヒントを探る中で、手続き型とか、DOM操作の観点からVueやReactをオススメ、的な記事を見つけましたが、まさかこうつながってくるとは思いませんでした。hope_mucciさんのご解説のおかげで点と点が繋がりスッキリいたしました。次の目標も見えてきて道は果てしないですが学んでいこうと思います。改めましてありがとうございました！

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