BottleのWebアプリケーションで、ページ遷移をせずに出力結果を取得する方法

Pythonスクリプトをページ遷移なしでhtmlから呼び出し、戻り値を受け取る方法はありますでしょうか？

Bottleを使って、Webページ上で入力した文字列をpythonスクリプトに渡し、処理結果を返すという内容のWebアプリケーションを作っています。
現在は下記のようにwebページからpostメソッドでスクリプトを呼び出し、遷移先に処理結果を出力するところまでできています。

main.py

python
1from bottle import route, run, template, request, static_file, url, get, post, response, error
2import sys, codecs, bottle
3def processer(text):
4  res=処理結果
5  return res
6
7@bottle.route("/")
8@bottle.auth_basic(check)
9def hello():
10  return template("input")
11
12@route('/result', method='POST')
13def go():
14  value=request.forms.textvalue
15  res=processer(value)
16  return template('result',outputvalue=res)
17
18if __name__ == '__main__':
19    run(host="0.0.0.0", port=8000, debug=True, reloader=True)
20

input.tpl

html
1<form method="post" action="/result" name="text">
2  <button type="submit">処理開始</button>
3  <textarea id="box_left" class="diff_value_box1" name="textvalue">処理対象文字列</textarea>
4</form>

result.tpl

html
1<html>
2<body>
3<p>処理結果：{{outputvalue}}</p>
4</body>

これを、ボタンクリック時にページ遷移させず、input.tplを表示したままmain.pyのprocesserを実行し、下記のように同一ページ内に結果表示させるようにするのは可能でしょうか？

in-out.tpl

html
1<form method="post" action="/in-out.tpl" name="text">
2  <button type="submit">処理開始</button>
3  <textarea id="box_input" name="textvalue">処理対象文字列</textarea>
4</form>
5<p id="box_output" >処理結果：処理結果</p>

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

回答1件

ベストアンサー

Pythonだけでは難しいと思います。 JSを合わせて利用することで、実現は可能です。以下に簡単な処理の流れを記載します。

1. (js) Ajaxで "/result" にPOSTする 
2. (python) go関数は、processを実行して、json等の結果データを返す
3. (js) 2のJSONデータを受け取って in-out.tpl のような結果HTMLをjsで組み立てて画面上に表示する。

Ajaxを利用した非同期通信の方法は、検索すれば沢山でてくるのでここでは説明を割愛します。

投稿2017/04/10 15:32

tell_k

総合スコア2120

lazuline8

2017/04/12 12:22

回答ありがとうございます。 Ajaxを利用して非同期通信をやるんだろうなということはすぐわかったのですが、値の受けわたしと結果画面の構築でつまづいています。実はpython側の処理で戻り値がリスト型と文字列型で２つ出る処理になっているのですが、これをjs側でどのように処理していいのかわからないのです。

tell_k

2017/04/12 16:53 編集

python側は標準の jsonパッケージを使えば、pythonの辞書やリストを jsonオブジェクトに変換できます。イメージとしては上記コードの「outputvalue」を json.dumps で json化したものをAPIで出力する感じです。クライアント(JS)側は、json化された「outputvalue」を受け取って、それを画面上に表示してあげるようになるかと思います。 http://www.buildinsider.net/web/jqueryref/059 AjaxでAPIを叩いて出力するのは、上記URLが参考になるかもしれません

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