Me gustaría obtener los datos de posición del joystick js o usarlo en el servidor del matraz. Intenté usar ajax:
pitón:
@app.route('/test', métodos=['GET', 'POST']) def test_ajax():
if request.method == "POST": data = request.json print('data:', data) result = {'url': url_for('index')} print('result:', result) return jsonify(result) else: return render_template('index.html') <div class="container fluid"> <h1>Joystick</h1> <div id="joy1Div" style="width:200px;height:200px;margin-bottom:20px;"></div> </div> <script type="text/javascript"> var Joy1 = new JoyStick('joy1Div', {}, function(stickData) { joy1IinputPosX.value = stickData.xPosition; joy1InputPosY.value = stickData.yPosition; joy1Direzione.value = stickData.cardinalDirection; joy1X.value = stickData.x; joy1Y.value = stickData.y; }); </script> <script> data = {'ID': 'foobar'}; var joystick = document.getElementById('joy1Div'); joy1X.onchange = function() { $.ajax({ type: "POST", url: "/test", contentType: 'application/json;charset=UTF-8', data: JSON.stringify(data, null, '\t'), dataType: 'json', success: function(data) { window.location.href = data['url'] }, error: function(response) { alert(response) }, }); }; </script>Cada vez que cambia la posición del joystick, me gustaría enviar los datos de posición al matraz.
Simplemente puede usar la función de devolución de llamada para enviar los datos del joystick. En este ejemplo, uso fetch para transferir los datos a través de AJAX.
from flask import Flask from flask import ( jsonify, render_template, request ) app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/process', methods=['POST']) def process(): data = request.get_json() print(data) return jsonify(message='Success', stickdata=data) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="joy1Div" style="width:200px;height:200px;margin-bottom:20px;"></div> <script type="text/javascript" src="{{ url_for('static', filename='js/joy.min.js') }}"></script> <script type="text/javascript"> (function() { const joy1 = new JoyStick('joy1Div', {}, function(stickData) { fetch('/process', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(stickData) }).then(resp => resp.json()) .then(data => console.log(data)); }); })(); </script> </body> </html>Si acepta la sugerencia legítima de usar websockets, recomendaría Flask-SocketIO .
from flask import Flask from flask import render_template from flask_socketio import SocketIO app = Flask(__name__) app.secret_key = 'your secret here' socketio = SocketIO(app) @app.route('/') def index(): return render_template('index.html') @socketio.on('stick') def handle_stick(data): print(data) if __name__ == '__main__': socketio.run(app) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="joy1Div" style="width:200px;height:200px;margin-bottom:20px;"></div> <script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/joy.min.js') }}"></script> <script type="text/javascript"> (function() { const sock = io(); const joy1 = new JoyStick('joy1Div', {}, function(stickData) { sock.emit('stick', stickData); }); })(); </script> </body> </html>