Zum Inhalt springen
SONOYA .com
Web & Code

Anleitung: Aus einem Webseiten-Formular Inhalte an Python Skript übergeben

Wer ein wenig mit Python rumgespielt hat und ein paar erste Skripte erfolgreich verfasst hat, wird sich früher oder später auch dafür interessieren, wie man die Python Skripte in eine Webseite einbinden kann. In dieser kurzen Anleitung schauen wir uns einmal an, wie man aus…

Von Sonoya Redaktion 1 Min. Lesezeit
Anleitung: Aus einem Webseiten-Formular Inhalte an Python Skript übergeben
Anleitung: Aus einem Webseiten-Formular Inhalte an Python Skript übergeben

Wer ein wenig mit Python rumgespielt hat und ein paar erste Skripte erfolgreich verfasst hat, wird sich früher oder später auch dafür interessieren, wie man die Python Skripte in eine Webseite einbinden kann. In dieser kurzen Anleitung schauen wir uns einmal an, wie man aus einem Webseiten Formular in HTML und der Hilfe von Javascript Inhalte an ein Python Script übergeben werden können.

1. HTML Formular erstellen

Zuerst erstellt man den Code für ein einfaches HTML-Formular:

Code
<form>
<label for="input-text">Enter text:</label>
<input type="text" id="input-text" name="input-text">
<button type="submit" id="submit-btn">Submit</button>
</form>

 

2. Javascript benutzen

Als Nächstes wird Javascript dazu genutzt den Text aus dem Formular zu übertragen und die Funktion des “Submit”-Buttons zu überschreiben:

Code
const form = document.querySelector('form');
 form.addEventListener('submit', function(event) {
 event.preventDefault(); // Prevent the default form submission behavior
 const inputText = document.querySelector('#input-text').value;
sendData(inputText); // Call a function to send the data to the backend
});

 

3. Python Script und Flask verwenden

Jetzt schreibt man ein kurzes Python Script, das mit Hilfe von Flask den HTTP Request managed und den Inhalt des übertragenen Textfeldes in eine Variable ermöglicht speichert:

Code
from flask import Flask, request

app = Flask(__name__)

@app.route('/submit-text', methods=['POST'])
def submit_text():
  input_text = request.form['input-text']
  # Do something with the input_text variable here
  return 'Received input: ' + input_text

if __name__ == '__main__':
  app.run()

 

4. Javascript zur Übertragung des Inhalts

Den eigentlichen Datentransfer aus dem Frontend in das Backend übernimmt dann wieder JavaScript mittels einer fetch() function die ein HTTP POST request an das Python Script richtet:

Code
function sendData(inputText) {
  fetch('/submit-text', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'input-text=' + encodeURIComponent(inputText)
  })
  .then(response => response.text())
  .then(data => {
    console.log(data); // Log the response from the backend
  })
  .catch(error => {
    console.error(error);
  });
}

 

5. Flask Server starten

Zuletzt muss noch der Flask server gestartet werden indem das Python scrip gestartet wird. Heisst das Python Script beispielsweise app.py, kann es auf der command line im Terminal mit python app.py gestartet werden.

Das waren im Wesentlichen die erforderlichen Schritte.

Ergebnis-Code

Setzt man die einzelnen Skripte jetzt zusammen, erhält man zwei Code Listings, die man ausführen kann:

Das HTML-Listing (mit Javascript):

Code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Submit Text</title>
  </head>
  <body>
    <h1>Submit Text</h1>
    <form>
      <label for="input-text">Enter text:</label>
      <input type="text" id="input-text" name="input-text">
      <button type="submit" id="submit-btn">Submit</button>
    </form>
    <script>
      const form = document.querySelector('form');
      form.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission behavior
        const inputText = document.querySelector('#input-text').value;
        sendData(inputText); // Call a function to send the data to the backend
      });

      function sendData(inputText) {
        fetch('/submit-text', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: 'input-text=' + encodeURIComponent(inputText)
        })
        .then(response => response.text())
        .then(data => {
          console.log(data); // Log the response from the backend
        })
        .catch(error => {
          console.error(error);
        });
      }
    </script>
  </body>
</html>

Und das Python Skript (mit Verwendung von Flask):

Code
from flask import Flask, request

app = Flask(__name__)

@app.route('/submit-text', methods=['POST'])
def submit_text():
  input_text = request.form['input-text']
  # Do something with the input_text variable here
  return 'Received input: ' + input_text

if __name__ == '__main__':
  app.run()

 

Um diesen Code auszuführen, muss man nun beispielsweise den HTML-Code in eine Datei namens index.html speichern, den Python-Code in eine Datei namens app.py speichern und das Python-Skript mit dem Befehl python app.py ausführen. Dadurch wird der Flask-Server gestartet und es ist möglich, Text über das HTML-Formular zu übermitteln. Der Text wird an das Python-Skript gesendet und in der Konsole ausgegeben.

Hierauf aufbauen kann das Python-Skript jetzt natürlich modifiziert werden, um etwas Nützlicheres mit dem Text zu tun, wie zum Beispiel in einer Datenbank zu speichern oder eine Verarbeitung darauf durchzuführen.

Weiterlesen .