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:
<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:
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:
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:
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):
<!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):
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.