1

Tenho uma aplicação feita com o framework Flask.

Em um formulário de Login, tenho o interesse de enviar uma informação do Python para o Javascript. Tentei fazer isso assim:

@app.route("/compras/", methods=["POST", "GET"])
def compras():
   global resposta
   output = request.get_json()
   result = json.loads(output)
   resposta = sqlite_funcs.confereUsuario(result['usuario'], result['senha'])
   # resposta = {'value': resposta}
   # resposta = json.dumps(resposta)
   return render_template('index.html', resposta=resposta), print(resposta)

O valor de "resposta" é printado corretamente no terminal. Para testar dentro do HTML:

{% if resposta is defined and resposta|length > 0 %}
<script>
  alert('{{ resposta }}')
</script>
{% endif %}

E por último, que é o que mais me interessa, uma parte do código JS que está dentro de uma função que contém um formulário SweetAlert:

.then(() => {
      let usr = resposta;
      console.log(usr);
      let usuario = JSON.parse(usr);
  });   

Sou iniciante em programação, estou aprendendo por meio de aplicações Web simples. O foco da pergunta é entender como funciona o envio de dados no sentido Python -> Javascript. No sentido contrário eu consegui, salvei informações inputadas pelo usuário no Sqlite desta forma.

Atualização:

Fiz um projeto TESTE contendo apenas um campo Input e um Botão Submit, ambos estão dentro de uma tag (sendo compras a função do endpoint que recebe as informações inputadas). Ao digitar algo e clicar no botão, um alert aparece com o que foi escrito e um "h1" renderiza na página.

Para comparar, eu comentei o Input e o Botão e adicionei uma tag script contendo o SweetAlert, mudei o método de requisição para JSON e adicionei um "print(informacoes_inputadas)" no endpoit do Python para conferir se estava recebendo as informações do formulário. Neste caso, as informações são realmente printadas no terminal (o que indica que elas chegaram no endpoit), mas não aparece o alert e nem é renderizado o "h1" na página.

2
  • já tentou dentro da tag script do html fazer var resposta ={{ resposta }}? Commented 3/01/2023 às 14:31
  • @RicardoPontual já sim... e não foi. Eu acredito que estou errando na rota "compras" do Flask...
    – Levy Cruz
    Commented 3/01/2023 às 14:34

3 Respostas 3

1

Eu agradeço a todos pelas respostas.

O caminho para solução foi entender melhor como que funciona o AJAX no SweetAlert. Adicionei ".done(response)" logo apóx o AJAX, o que fez retornar a resposta da minha rota python. (Literalmente: response = return reposta --> Sendo resposta o valor retornado pela função python).

Segue o código HTML com o SweetAlert:

<script language=javascript action="compras" method="POST">
    Swal.fire({
        title: 'Solicitação de Compra',
        html: `<input type="text" id="login" class="swal2-input" placeholder="Usuário">
        <input type="password" id="password" class="swal2-input" placeholder="Senha">`,
        confirmButtonText: 'Entrar',
        focusConfirm: false,
        preConfirm: () => {
          const login = Swal.getPopup().querySelector('#login').value
          const password = Swal.getPopup().querySelector('#password').value
          if (!login || !password) {
            Swal.showValidationMessage(`Please enter login and password`)
          }
          return { login: login, password: password }
        }
      }).then((result) => {
          const usuario = result.value.login;
          const senha = result.value.password;
          const dict_values = {usuario, senha};
          const s = JSON.stringify(dict_values);
          $.ajax({
              url:"/compras",
              type: "POST",
              contentType: "application/json",
              data: JSON.stringify(s)
          })**.done((response) => {
            var test = JSON.parse(response)
            console.log(test.usuario);
          })**
        })
  </script>

{% block content %}
  {% if variavel is defined %}
      <script type=text/javascript>
        const jsondata = JSON.parse('{{ variavel | tojson | safe}}');
        alert(jsondata);
      </script>
      <h1>Testing {{ variavel|tojson|safe }}</h1>
  {% endif %}
{% endblock %}

Segue o endpoit que recebe o usuário e senha e retorna o "response":

@app.route("/compras", methods=["POST", "GET"])
def compras():
    if request.method == 'POST':
        output = request.get_json()
        msg_ = json.loads(output)
        print(msg_, "1")
        try:
            if msg_ =='':
                flash(f"Digite algo para pesquisar", "error")
                return render_template('index.html')
            else:
                **return json.dumps(msg_)**
        except sqlite3.OperationalError as e: 
            flash(f"Peça não encontrada, digite novamente !", "warning")
            return render_template('index.html', msg_=0), print(type(e), e)
    else: return print("error")

Antes eu estava retornando "render_template('index.html', response=response)" e não funcionava. Coloquei o "done((response) => console.log(response))" e percebi que todo o código 'index.html' estava sendo exposto no console. Tirei a render_template e deixei apenas "return json_dumps(response)" e mantive o console.log. Agora a variável "response" apareceu no console já formatada!

3
  • pois é cara, mas você utilizou a minha solução como base...
    – Danizavtz
    Commented 4/01/2023 às 19:36
  • @Danizavtz não po... eu só li a documentação do "tojson", mas você realmente me ajudou, marquei sua resposta.
    – Levy Cruz
    Commented 5/01/2023 às 23:33
  • eu ja fiz isso em alguns projetos :)
    – Danizavtz
    Commented 5/01/2023 às 23:41
0

Uma maneira de resolver o problema é utilizando uma variável auxiliar para fazer o parse das informações.

Desta forma, um código que pode resolver o problema é o seguinte: você deve usar o JSON.parse dos dados recebidos no seu template html.

<html>
  <head>
  <script>
    const jsondata = JSON.parse('{{ resposta | tojson | safe}}');
    console.log(jsondata) //deve exibir os seus dados
  </script>
  </head>
  <body>
  </body>
</html>

Para executar este fluxo, basta utilizar a documentação do filtro padrão tojson

-1

Atualizado

No Flask basta usar a variável enviada entre {{ }}, ou seja, `{{ sua_variavel}}``

Veja o exemplo:

<html>
<head>
  <script>
    var someJavaScriptVar = '{{ sua_variavel_aqui }}';
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Variavel: ' + someJavaScriptVar)" />
</body>
</html>

Outra possibilidade é usar |tojson|safe (veja aqui) conforme abaixo

<script type=text/javascript>
    alert({{ sua_variavel_aqui|tojson|safe }});
</script>

No Django a solução seria fazer com que o JS pegue o valor em um bloco específico de variáveis que usam o pipe (|) conforme abaixo.

{% block vars_to_js %}
  {{ sua_variavrel|json_script:"variable_para_js" }}
{% endblock %}

(....seu código HTML aqui....)

<script>
    var variavel_js = JSON.parse(document.getElementById('variavel_para_js').textContent);
    (....seu código JS aqui....)
</script>
5
  • Eu queria achar uma solução sem ter que adicionar nada no código HTML, mas sim trazendo a variável diretamente pro JS. Mesmo assim, eu tentei fazer desta forma (vai que trazia alguma ideia) e, infelizmente, não foi. Acredito que o "json_script" seja um filtro do Django Template, pois ao rodar na minha aplicação em FLASK aparece um erro do Jinja2: "jinja2.exceptions.TemplateSyntaxError: expected token 'end of print statement', got ':'"
    – Levy Cruz
    Commented 3/01/2023 às 19:44
  • Opa, pode ser que seja do DJANGO Template sim, porém eu tinha uma forte ideia que seria do JINJA2 Commented 3/01/2023 às 20:12
  • Atualizei o post o Flask possui um tojson Commented 3/01/2023 às 23:07
  • Paulo, primeiramente devo te agradecer pela ajuda e disposição. O conhecimento do "tojson" foi muito útil! Seguindo com o problema: O formulário por onde as informações são inputadas é um SweetAlert. Fiz um teste para ver se o problema era com a configuração dele: - Fiz um projeto Teste simples apenas com um campo de input = consegui receber as informações chamando o endpoint pelo "onclick" do botão subtmit; - Tirei o input e o botão e adicionei o SweetAlert no lugar e tentei receber as informações = as informações não são recebidas!
    – Levy Cruz
    Commented 4/01/2023 às 11:50
  • O mais engraçado é que eu sei que as informações chegaram no endpoit, pois eu coloquei um "print(informações)" e deu certo. Meu foco é, dependendo dessas "informações" um função JS vai ser rodada, por isso que eu não tenho interesse de passar pelo HTML, mas sim mandar diretamente as "informações" do endpois Flask (que eu sei que ta la por conta do print) para a função JS que vai renderizar outro popup depois.
    – Levy Cruz
    Commented 4/01/2023 às 11:56

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 .