在没有Form事件的情况下将Javascript变量发送到Flask Python代码

Question

我对Flask和Javascript有问题。我想用一个网站来控制一个带操纵杆的迷你机器人。我找到了nippleJS(https://github.com/yoannmoinet/nipplejs)并将其包含在我的网站上。我可以将操纵杆的值打印到web控制台，但我需要在Python脚本中为机器人控制提供这些值。有人能帮我吗？这是我的代码：HTML:

<script src="{{url_for('static', filename='nippleJS.js')}}"></script>
<script>
var joystickL = nipplejs.create({
zone: document.getElementById('left'),
mode: 'static',
position: { left: '20%', top: '50%' },
color: 'green',
size: 200

});

var joystickR = nipplejs.create({
zone: document.getElementById('right'),
mode: 'static',
position: { left: '80%', top: '50%' },
color: 'red',
size: 200,
lockY: 1
});
joystickL.on('move', function (evt, nipple) {
var dis = nipple.distance;
var angle = nipple.angle.radian;
var pos = nipple.position;
console.log(dis);
console.log(angle); </script>

这是我的烧瓶代码：

from flask import Flask, render_template, request, redirect, url_for, jsonify
app = Flask(__name__)
@app.route("/", methods=['GET', 'POST'])
def home():
if request.method == 'POST':

if request.form['btn'] == 'Demo Programme':
return redirect(url_for('demo'))
elif request.form['btn'] == 'Manuelle Steuerung':
return redirect(url_for('steuerung'))
elif request.form['btn'] == 'Erweiterte Optionen':
return redirect(url_for('optionen'))

return render_template('home.html')

Answer 1

理论上，您可以使用fetch()API向服务器发送请求，该服务器具有保存值的JSON主体。

然后，您的on("move")可能看起来像这样。

joystickL.on('move', function (evt, nipple) {
const data = {
"distance": nipple.distance,
"radian": nipple.angle.radian,
"position": nipple.position,
}
try {
// call to your server with the correct host and username
const response = await fetch("localhost:5000/your-endpoint", {
method: "POST",
data: JSON.parse(data)
})
if(!response.ok){
// your error handling here (if necessary)
}
} catch (error) {
console.log("Something went wrong")
}
}

根据您需要发送数据的频率，例如，您想要或多或少的实时数据，最好使用WebSockets。你可能还想看看socket.io。我相信还有一个专门针对Flask的socket.io包，因为如果你想使用WebSockets，你需要调整前端和后端。