テンプレートは基本HTMLですが、FlaskのJinjaテンプレートエンジンを使って変数を表示するようにします。%}v-modelでフォームで選択された値numを管理するようにしています。v-onでactionとしているので、ユーザが選択肢を変えるたびにaction関数が呼ばれることになります。dataはバックエンドから取得したデータのことです。次にAjax通信するためのコードです。JavascriptのVue.jsを使います。Vue({el:'#hoge',});先ほどのv-modelで指定したnumをURLに含めてバックエンドと通信します。その際に、jQueryの$.getを使っています。取得したデータは、dataに保存するようにしています。最後にバックエンドを見ていきましょう。シンプルなPythonコードです。Flaskというwebアプリフレームワークを使っています。jsonify(data[n])URLに入力された番号を受け取って、IDに紐づくデータを取得して、JSONにして返しています。シンプルなコードですね。