0
votes

Comment puis-je contrôler le flux d'utiliser JavaScript d'abord, puis envoyez-le sur le serveur d'extrémité arrière créé à l'aide de la structure de la fiole?

J'utilise le cadre de la fiole .. J'ai une balise de formulaire à l'extrémité avant pour connecter l'identifiant et le mot de passe et un bouton d'envoi.

Je souhaite utiliser JavaScript à l'avant pour vérifier les données fournies par l'utilisateur dans le champ Formulaire, puis si tout va bien, Ensuite, je souhaite envoyer les données fournies par l'utilisateur au serveur d'extrémité arrière et le traiter à l'aide de Python .. p>

mais comment puis-je contrôler le processus que lorsque l'utilisateur clique sur le bouton Soumettre Le contrôle ira au code JavaScript, puis après la validation, les données sont envoyées sur le serveur d'extrémité arrière forte> p>

dans l'extrait que j'ai donné un exemple factice. En cela, mon doute est comment d'abord envoyer le contrôle à la validate_login_form () forte> écrit dans le script Java, puis après validation, le contrôle doit aller sur le {{url_for ('home')}} strong> écrit dans la partie action forte> à l'aide du moteur JINJA2 STRT> MODIBLET P>

Ici, le problème que je suis est, après avoir rempli Le formulaire, lorsque l'utilisateur a cliqué sur le bouton Soumettre, le contrôle va bien à la fonction de script Java écrit pour valider le formulaire, mais même si le script Java renvoie false, le contrôle passe automatiquement sur le serveur d'extrémité arrière. strong>

mais ce que je veux faire, c'est si le script Java renvoie false, le contrôle doit s'arrêter là et demander à l'utilisateur de remplir à nouveau le formulaire. strong> P>

<html> <head> </head> <body> <form action="{{url_for('home')}}" onsubmit="validate_login_form()"> <label for="login_id">LogIn</label> <input type="text" name="login_id" placeholder="login Id" id="login_id"> <label for="password">Password</label> <input type="password" name="password" placeholder="password" id="password"> <br><br> <input type="submit" value="submit" > </form> <script src="{{ url_for('static', filename='scripts/login.js') }}"></script> </body> </html>

javascript python flask forms linker

0 commentaires

3 Réponses :

0
votes

simple: https://www.w3schools.com/jsref/event_onsubmit.aspecta a>. Là votre Go:

 <form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form> 

<script>
function myFunction() {
    return true;
}
</script>

2 commentaires

Si je fais cela, lorsque l'utilisateur cliquer sur le bouton Soumettre, le contrôle ira à JavaScript sur FronTend, puis comment sera-t-il renvoyé au serveur après la validation?

Lorsque la fonction retourne true, le chemin d'action normal sera appelé

0
votes

html de l'exemple: strong> xxx pré>

JavaScript: strong> p> xxx pré>

BLACK / PYTHON: FORT> P>

from flask import request
@app.route('/mypage', methods=['GET', 'POST'])
def myPage():
    if request.method == "POST" and request.json:
          data = request.json
         
          # send data to database

          return 'success', 200

0 commentaires

0
votes

Le seul problème ici dans les codes se trouve dans la balise forte> Strong> forge> dans HTML,

J'aurais dû écrire Onsubmit = retour validate_login_form () strong> Au lieu de Onsubmit = validate_login_form () fort> p>

par ce code si la fonction JavaScript renvoie true fort>, la page sera redirigée vers l'URL écrite dans le Champ d'action de la balise de formulaire forte> Et si la fonction JavaScript renvoie fluide fort>, le contrôle restera dans la même page sans être redirigé. C'est ainsi que le flux peut être contrôlé p>

<html> <head> </head> <body> <form action="{{url_for('home')}}" onsubmit="return validate_login_form()"> <label for="login_id">LogIn</label> <input type="text" name="login_id" placeholder="login Id" id="login_id"> <label for="password">Password</label> <input type="password" name="password" placeholder="password" id="password"> <br><br> <input type="submit" value="submit" > </form> <script src="{{ url_for('static', filename='scripts/login.js') }}"></script> </body> </html>

0 commentaires