Gostaria de uma ajuda com uma aplicação em Python utilizando o framework Flask, estou querendo enviar e receber dados via JavaScript utilizando o Ajax, porém não estou sabendo como fazer, tudo que eu consegui foi uma coleção de erros diferentes e nenhum sucesso.
main.py
from flask import request
from flask import json, jsonify
from flask import render_template as rt
app = Flask(__name__)
@app.route('/')
def index():
usr = {
'id': 1,
'nome': 'bruno'
}
usr = json.dumps(usr)
return rt('index.html', usr=usr)
@app.route('/usuario', methods=['GET', 'POST'])
def usuario():
usr = {}
if request.method == 'POST':
if request.is_json:
print('is_json: {}'.format(request.is_json)) # retorna True
usr = request.get_json(force=True)
print('get_json: {}'.format(usr)) # retorna o JSON
return jsonify(usr)
#return rt('usuario.html', usr=usr)
if __name__ == '__main__':
app.run(host='127.0.0.1')
index.html
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello</title>
</head>
<body id="corpo" data-usr="{{ usr }}">
<h1>Home</h1>
<p>Ver <a href="{{ url_for('usuario') }}">usuário</a></p>
<input type="button" onclick="alertar()" value="alerta">
<input type="button" onclick="enviar_ajax()" value="enviar">
<script src="{{ url_for('static', filename='jquery-3.4.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='main.js') }}"></script>
</body>
</html>
usuario.html
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello</title>
</head>
<body id="corpo" data-usr="{{ usr }}">
<h1>Usuário</h1>
<p>Ver <a href="{{ url_for('index') }}">home</a></p>
<p id="usr_id">{{ usr.id }}</p>
<p id="usr_nome">{{ usr.nome }}</p>
<script src="{{ url_for('static', filename='jquery-3.4.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='main.js') }}"></script>
</body>
</html>
main.js
function get_usr() {
let usr = document.getElementById('corpo').getAttribute('data-usr');
let usuario = JSON.parse(usr);
return usuario;
}
function alertar() {
let usuario = get_usr();
alert(usuario.nome);
}
function enviar_ajax() {
let usuario = get_usr();
usuario.nome = 'Bruno';
usuario.id = 42;
const post_usuario = JSON.stringify(usuario);
console.log('post_usuario: ' + post_usuario);
$.ajax({
url: '/usuario',
type: 'POST',
//data: JSON.stringify(usuario),
//data: {'id': '7', 'nome': 'BRUNO'},
data: post_usuario,
//data: usuario,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
sucess: function (result, status, request) {
console.log('Sucess');
alert('Sucess');
},
error: function (event, jqxhr, settings, thrownError) {
console.log('event: ' + JSON.stringify(event));
console.log('jqxhr: ' + jqxhr);
console.log('settings: ' + settings);
console.log('thrownError: ' + thrownError);
//alert('Error');
}
});
}
Acontece que eu consigo enviar os dados no sentido Python -> JavaScript
, ou seja, a função alertar()
recebe os dados da forma que eu gostaria, creio que não haveria problemas em jogar eles para algum campo do HTML
.
Agora no sentido JavaScript -> Python
é que tem algum problema, deixei comentada no ajax
todas as minhas tentativas e a que esta ali é a que "funciona", digo entre aspas, pois eu até recebo os dados no Python (veja no print('get_json: {}'.format(usr))
), porém ele não passa para a página usuario
.
Outro problema que notei é que o ajax
NUNCA executa o que esta na função sucess
, tentei usar done
, porém tive o mesmo problema.
Erro na forma atual (no navegador):
post_usuario: {"id":42,"nome":"Bruno"}
main.js:37 event: {"readyState":4,"responseText":"<!DOCTYPE html>\n<html lang=\"pt-br\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Hello</title>\n</head>\n<body id=\"corpo\" data-usr=\"{"id": 42, "nome": "Bruno"}\">\n <h1>Usuário</h1>\n <p>Ver <a href=\"/\">home</a></p>\n <p id=\"usr_id\"></p>\n <p id=\"usr_nome\"></p>\n\n <script src=\"/static/jquery-3.4.1.min.js\"></script>\n <script src=\"/static/main.js\"></script>\n</body>\n</html>"
,"status":200,"statusText":"OK"}
main.js:38 jqxhr: parsererror
main.js:39 settings: SyntaxError: Unexpected token < in JSON at position 0
main.js:40 thrownError: undefined
Repare que ele retorna status
200 OK, porém com um erro.