この記事では、JavaScriptとPython間で変数を受け渡す方法について説明します。具体的には、Ajaxを使用してPythonとJavaScript間で変数を送受信する方法について解説します。
PythonからJavaScriptへの変数の渡し方
PythonのFlaskを使用して、HTMLテンプレートファイルに直接書かれたJavaScriptに値を渡す方法があります。具体的には、以下のようになります。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
text = "こちらFlaskスネーク。 応答せよ。"
return render_template('index.html', text=text)
if __name__ == "__main__":
app.run(debug=True, port=8888, threaded=True)
そして、HTMLテンプレートファイルでは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>FlaskからJavaScriptに値を渡す</title>
</head>
<body>
<p>{{text}}</p><br>
<script>
var x = {{text|tojson}};
document.write("(" + x + ")" + " Roger こちらJavaScript。 Over。 ")
</script>
</body>
</html>
この例では、PythonからJavaScriptにtextという変数を渡しています。そして、JavaScriptではその変数をxという変数に再定義し、ページに文字列を表示しています。
JavaScriptからPythonへの変数の渡し方
JavaScriptからPythonへ変数を渡す際には、Ajaxを使用します。具体的には、以下のようになります。
$(function(){
$.ajax({
url: 'recieve.py',
type: 'post',
data: '送信メッセージ'
}).done(function(data){
console.log(data);
}).fail(function(){
console.log('failed');
});
});
この例では、recieve.pyというPythonファイルに送信メッセージという文字列を渡しています。そして、Pythonから処理の結果を受け取り、それをコンソールログに出力しています。
以上が、JavaScriptとPython間で変数を受け渡す基本的な方法です。これらの方法を理解し、適切に使用することで、PythonとJavaScriptの間でデータを効率的にやり取りすることが可能になります。.