0
votes

Comment charger du contenu dans l'élément div avec la fiole

Je voudrais remplir / mettre à jour une zone div dans index.html avec le résultat de la fonction Python, mais je ne sais pas comment faire cela. Je sais qu'il y a plusieurs autres questions avec un sujet similaire, mais je ne pouvais pas réussir avec eux parce qu'ils étaient trop spécifiques. Je tire mes cheveux sur ça.
serait quelqu'un si gentil et me guiderait? de
Ceci est une fonction dans MAINHY.PYRY:

<body>

    <form action="/stat/"> 

    <button type="submit" id="btn1" class="btn btn-primary btn-sm">check stat</button>

    </form>

 <div id="stat_content"></div>

</body>

p>Ce est l'index.html: p> xxx pré> p>


3 commentaires

Si vous souhaitez ajouter quelque chose à une page Web chargée, vous avez besoin de JavaScript et d'Ajax sur le navigateur.


Regardez ici. Vous aurez besoin de passer la valeur calculée la valeur de la page dans le modèle. Ce lien utilise une logique similaire avec l'exemple d'un nom . Vous NE PAS BESOIN JS ou AJAX pour cette tâche simple.


@Michael Butscher Oui mais je ne sais pas où commencer avec ça. Il y a quelques tutoriels mais toujours avec d'autres fins / structures qui ne me confondent que moi. Savez-vous où je peux trouver un tutoriel étape par étape?


3 Réponses :


3
votes

AS @ S3DEM souligne, vous devrez passer la chaîne dans le modèle via un argument supplémentaire. Par exemple, nous pourrions faire quelque chose comme ceci: xxx pré>

dans le code ci-dessus, nous définissons texte code> pour être la chaîne à transmettre au modèle. Dans le modèle, nous pourrons accéder à cette variable de chaîne sous forme de texte code>. P>

maintenant lorsque index.html code> est rendu, il sera rendu. La variable code> texte code> est transmise de l'application de la fiole. Ceci est pris en charge par Jinja 2 , qui est le moteur de rendu utilisé par le ballon. P>

<div id="stat_content">
  {% if text %}
  <h2>No text to show</h2>
  {% else %}
  <h2>{{ text }}</h2>
  {% endif %}
</div>


6 commentaires

Je reçois une erreur:'Method non autorisé La méthode n'est pas autorisée pour l'URL demandée.


@Markt - Mettez à jour la route vers: @ app.route ('/ stat /', méthodes = ['Obtenir', 'Poste']) . Cela permet à la fois les méthodes d'obtention et de post requête pour accéder à la fonction. Le bouton Appuyez sur une méthode postale et non autorisée par défaut.


Yup, merci pour l'entrée @ S3Dev. Op, cela devrait résoudre le problème. Par défaut, le ballon n'autorise que obtenez , mais puisque nous passons maintenant texte comme argument à rendu, il s'agit d'une méthode POST . doit être spécifié dans la déclaration d'itinéraire.


L'erreur est partie maintenant mais après le bouton, cliquez, rien ne se produit


Pouvez-vous essayer d'éditer la partie formulaire de index.html à ?


J'ai changé la balise div comme ceci:

{{texte}} et fonctionne. Merci!



0
votes

Vous voulez que cela soit initié à partir du bouton droit? Voici comment réaliser cela avec AJAX ...

<body>
<form action="/stat/">
<button type="submit" onclick="GetData();" id="btn1" class="btn btn-primary btn-sm">check stat</button>
</form>
<div id="stat_content"></div>
</body>
<script type="text/javascript">
function GetData() {
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
       if (xmlhttp.status == 200) {
           document.getElementById("stat_content").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "/stat/", true);
    xmlhttp.send();
}
</script>


2 commentaires

Point valide, cependant op utilise le ballon. Ajax n'est pas nécessaire.


Rien ne se passe après avoir cliqué sur le bouton



0
votes

Pour mettre à jour le contenu de cette DIV, je pense (basé sur votre logique), vous devez effectuer un appel AJAX à votre fonction code> STAT code> avec les deux paramètres A et B envoyés via Post Code> Demande:

from flask import Flask, request, make_response
import json

@app.route('/stat', methods=['POST'])
def stat():
    if request.method == 'POST':
        a = request.form['a']
        b = request.form['b']
        # check if inputs are valid to work with ..
        res = str(a) + ' is not ' + str(b) if a != b else str(a) + ' and ' + str(b) + ' are equal.'
        resp = make_response(json.dumps(res))
        resp.status_code = 200
        return resp


8 commentaires

Le code HTML me donne 29 problèmes;). Quoi qu'il en soit, la fonction Python est juste un espace réservé, il n'est pas nécessaire de soumettre les 2 variables au HTML


Oui, il est clair que la fonction Python est juste un espace réservé, mais la logique est ici: Effectuer une demande Ajax. Est-ce que la bonne approche pour votre cas ou que je me manque de comprendre votre préoccupation? Quel genre de problemes ?


@Markt j'ai corrigé mon code Little bit et cela fonctionne comme prévu avec une simple application de flacon que j'étais manquante citations dans URL: "{{URL_for (" stat ")}}", et mélangé entre les commentaires de Python < code> # et javascript commit //


Il envoie apparemment les deux variables des formes d'entrée, mais la sortie reste sans résultat.


@Markt Je n'ai aucune idée, mais assurez-vous d'appeler le code JavaScript ci-dessus après la jQuery évidemment et essayez de noter // console.log (données); , y a-t-il une erreur?


Peut-être que je ne pas descendre ce que tu veux dire avec la requête. Dans l'étiquette du corps dans l'index.html, j'ai maintenant les ... ci-dessous après la balise corporelle, j'ai