Flasche Ajax

Wir werden mit dieser Erklärung lernen, wie man ein AJAX-Formular mit Hilfe von jQuery und Flask absendet, wobei jQuery den AJAX-Teil übernimmt und Flask die AJAX-Anfrage akzeptiert.

Senden Sie ein AJAX-Formular mit Hilfe von jQuery und Flask

Jetzt erstellen wir eine app.py-Datei und beginnen mit dem eigentlichen Schreiben des Codes. Das erste, was wir also behandeln wollen, ist die Serverseite.

Jetzt fügen wir eine Route namens post-data hinzu, die die Daten übernimmt, die von der AJAX-Anforderung übergeben wurden, und wir akzeptieren nur Post-Anforderungen. Wir werden eine Funktion namens Post_DATA() definieren, und innerhalb dieser Funktion müssen wir die Daten abrufen, die vom Formular übergeben werden.

Typischerweise hat ein AJAX die Form eines Wörterbuchs und des Anforderungsobjekts.

Wir erstellen das erste Objekt namens Employee_Email und speichern das request.form['Employee_Email'], was bedeutet, dass wir nach Daten aus dem Formularfeld suchen. Jetzt machen wir dasselbe mit einem anderen Objekt namens Employee_Name.

Employee_Email = request.form["Employee_Email"]
Employee_Name = request.form["name"]

Nun verarbeiten wir diese Daten, und wenn sowohl Employee_Email als auch Employee_Name existieren, erstellen wir einen New_EMP_Name. Was wir tun werden, ist den Employee_Name mit Employee_Name[::-1] umzukehren.

Jetzt geben wir ein JSON-Objekt mit dem Namen New_EMP_Name mit der Funktion jsonify() zurück, und wenn der Block nicht ausgeführt wird, geben wir ein JSON-Objekt mit dem Schlüssel error und seinem Wert zurück.

if Employee_Name and Employee_Email:
    New_EMP_Name = Employee_Name[::-1]

    return jsonify({"Employee_Name": New_EMP_Name})

return jsonify({"error": "Missing some data!"})

Wenn dieses Formular gesendet wird, benötigen wir die Veranstaltung, um es zu senden; Deshalb werden wir es von jQuery aus handhaben.

Wenn Sie in HTML ein Formular haben und auf Senden klicken, wird es im Allgemeinen versuchen, die Daten selbst zu senden. Es ist eine eingebaute HTML-Funktion; Sie benötigen kein JavaScript, um ein Formular abzusenden.

Da wir jQuery verwenden, um die Daten zu übermitteln, benötigen wir ein Ereignis. Das event ist der Parameter in der anonymen Funktion, und dann wird event.preventDefault() am Ende platziert, um zu verhindern, dass das Formular die Daten zweimal sendet.

$(document).ready(function() {
  $('form').on('submit', function(event) {
    event.preventDefault();
  });
});

Innerhalb der Funktion müssen wir ajax mit dem Dollarzeichen aufrufen und die Argumente konstruieren; Die Daten enthalten zwei Objekte, Employee_Email und Employee_Name. Wir lösen die Daten durch die entsprechende Eingabe-ID aus.

Jetzt müssen wir den Typ der Anfrage angeben, und es muss ein POST sein, weil wir in unserem Flask-Code nur Post-Anfragen akzeptieren, und dann ist die URL die Route, die /post-data.

$.ajax({
  data:
      {Employee_Name: $('#input_n').val(), Employee_Email: $('#input_e').val()},
  type: 'POST',
  url: '/post-data'
})

Jetzt erstellen wir eine done-Funktion und innerhalb dieser Funktion erstellen wir eine if-else-Anweisung, um zu prüfen, ob der Fehler auftritt oder nicht. Wir greifen auf die Alert-Box-ID aus der HTML-Datei zu, und wenn ein Fehler auftritt, wird die Warnung für die Fehlermeldung ausgewählt und dann die erfolgreiche Warnung ausgeblendet.

Wenn die if-Bedingung nicht wahr ist, gehen wir zum else-Block, machen genau das Gegenteil, füllen die Erfolgsmeldung mit den Textdaten aus diesem JSON-Objekt und wollen dann die Fehlermeldung ausblenden.

.done(function(data) {
  if (data.error) {
    $('#errorAlert').text(data.error).show();
    $('#successAlert').hide();
  } else {
    $('#successAlert').text(data.Employee_Name).show();
    $('#errorAlert').hide();
  }

Lassen Sie uns nun die Flask-App ausführen und die App-Route navigieren. Innerhalb des Formulars geben wir eine E-Mail-Adresse und dann einen Namen an, und nach dem Absenden können wir sehen, dass der Name in umgekehrter Reihenfolge zurückgegeben wird, ohne dass die Seite neu geladen wird.

Vollständiger Python-Code:

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)


@app.route("/")
def Main_Page():
    return render_template("index.html")


@app.route("/post-data", methods=["POST"])
def Post_DATA():

    Employee_Email = request.form["Employee_Email"]
    Employee_Name = request.form["Employee_Name"]

    if Employee_Name and Employee_Email:
        New_EMP_Name = Employee_Name[::-1]

        return jsonify({"Employee_Name": New_EMP_Name})

    return jsonify({"error": "Missing some data!"})


if __name__ == "__main__":
    app.run(debug=True)

Vollständiger JavaScript-Code:

$(document).ready(function() {
  $('form').on('submit', function(event) {
    $.ajax({
       data: {
         Employee_Name: $('#input_n').val(),
         Employee_Email: $('#input_e').val()
       },
       type: 'POST',
       url: '/post-data'
     }).done(function(data) {
      if (data.error) {
        $('#errorAlert').text(data.error).show();
        $('#successAlert').hide();
      } else {
        $('#successAlert').text(data.Employee_Name).show();
        $('#errorAlert').hide();
      }
    });

    event.preventDefault();
  });
});

Vollständiger HTML-Code:

<!DOCTYPE html>
<html>
<head>
    <title>Flask Form</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="{{ url_for('static', filename='index.js') }}"></script>
</head>
<body>
<div class="container">
    <br><br><br><br>
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="input_e">Email address</label>
        <input type="email" class="form-control" id="input_e" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="input_n">Name</label>
        <input type="text" class="form-control" id="input_n" placeholder="First Name">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <br>
    <div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
    <div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
</div>
</body>
</html>