3

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=\"{&#34;id&#34;: 42, &#34;nome&#34;: &#34;Bruno&#34;}\">\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.

1 Resposta 1

1

O sistema estava respondendo da forma correta, o motivo de não executar a função de sucesso é pelo fato de estar escrita errada, deveria ser success e não sucess.

É importante notar que o dado deve ser enviado utilizando o stringify da seguinte forma:

data: JSON.stringify(data),

Deixado que o backend faça o reconhecimento desta informação e transforme de string para JSON novamente.

O Ajax não deve redirecionar para outra página, mas sim buscar dados novos para a página atual.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .