So erhalten Sie Python und JavaScript zur Kommunikation mit JSON

Überhaupt gewundert, wie man Daten zwischen zwei Programmiersprachen sendet? Haben Sie immer versucht, ein Objekt oder mehrere Datenelemente zu senden?

Heute zeige ich Ihnen, wie Sie mit JSON Daten von JavaScript an Python senden. Ich werde darauf eingehen, wie Sie einen Webserver einrichten und den Code eingeben, den Sie benötigen.

Voraussetzungen

Sie benötigen ein paar Dinge, um mit diesem Projekt zu beginnen. Ich werde auf einem Mac laufen, auf dem Python bereits installiert ist. Sie sollten in der Lage sein, Linux unter Umständen gut zu folgen. Wenn Sie Windows verwenden, müssen Sie Python herunterladen und installieren und möglicherweise Ihre Befehlszeilenfähigkeiten verbessern. Einsteigerhandbuch für die Windows-Befehlszeile Einsteigerhandbuch für die Windows-Befehlszeile Über die Befehlszeile können Sie direkt mit Ihrem Computer kommunizieren und weisen Sie an, verschiedene Aufgaben auszuführen. Weiterlesen .

Sie benötigen pip, einen Paketmanager für Python. Dies wird standardmäßig mit Python-Versionen größer als 2.7.9 installiert.

Server-Setup

Du brauchst einen Server dazu Dienen Python zu einer Webseite. Dafür gibt es viele Möglichkeiten. Wenn Sie bereits über ein Server-Setup verfügen, können Sie diesen Schritt überspringen.

Hier gibt es viele Möglichkeiten. Tornado ist eine gute Wahl, ebenso wie Twisted (ich habe zuvor über Twisted für eine DIY-Netzwerkkamera geschrieben). Ich werde Flask für dieses Projekt verwenden.

Installieren Sie Flask mit pip (über die Befehlszeile):

pip install Flask

Das ist es! Es gibt einige Optionen zum Einrichten, aber wenn Sie es richtig installiert haben, können Sie loslegen.

Erwägen Sie die Verwendung einer virtuellen Python-Umgebung. Informationen zur Verwendung der virtuellen Python-Umgebung. Informationen zur Verwendung der virtuellen Python-Umgebung. Egal, ob Sie ein erfahrener Python-Entwickler sind oder gerade erst anfangen, Sie müssen wissen, wie Sie eine virtuelle Umgebung einrichten für jedes Python-Projekt. Lesen Sie mehr, dies ist jedoch völlig optional.

Python-Setup

Erstellen Sie eine neue Datei in Ihrem bevorzugten Texteditor oder in der Integrated Development Environment (IDE). Ich benutze Sublime Text 3 und PyCharm, aber ich benutze alles, was Sie wollen.

Führen Sie nun einige Ersteinstellungen für Flask durch:

aus dem Flaschenimport Flask app = Flask (__ name__)

Dadurch werden die erforderlichen Module importiert und Ihre App konfiguriert. Richten Sie jetzt ein Pfad:

@ app.route ("/ output") def output (): "Hello World!" zurückgeben

Dies konfiguriert a Pfad, Das ist wie eine Seite einer Website. Dies kann manchmal auch als bezeichnet werden Endpunkt oder ein Route.

Das Def-Ausgabe () Linie definiert a Funktion oder Methode namens Ausgabe, Die wird ausgeführt, wenn dieser Endpunkt aufgerufen wird. Diese Methoden müssen nicht denselben Namen wie der Endpunkt verwenden - nennen Sie ihn einen beliebigen Namen. Innerhalb dieser Methode ist eine einfache Hallo Welt! Schnur Schließlich richten Sie Ihr Skript so ein, dass es tatsächlich ausgeführt wird, wenn es angefordert wird:

Wenn __name__ == "__main__": app.run ()

Speichern Sie dieses Skript als json_io.py an einem geeigneten Ort. Gehen Sie zurück zu Ihrem Terminal und navigieren Sie zu Ihrem Projektordner. Führen Sie das Skript aus:

Python json_io.py

Das Wort Python wird verwendet, um dem Computer mitzuteilen, dass die folgende Datei als Python-Skript ausgeführt werden soll. Der Dateiname ist der Name der Datei, die Sie als Python ausführen möchten. Wenn alles richtig funktioniert, sollte eine Statusmeldung im Terminal angezeigt werden:

* Läuft auf http://127.0.0.1:5000/ (Drücken Sie zum Verlassen STRG + C)

Dies zeigt Ihnen die IP-Adresse Ihres Servers sowie den Port an. Diese werden sein 127.0.0.1 und 5000. Sie können drücken STRG > C um das Laufen zu stoppen, aber mach das noch nicht.

Geben Sie die Adresse in Ihren Browser ein und Sie sollten sehen Hallo Welt! erscheint auf dem Bildschirm. Sie haben jetzt erfolgreich einen Python-Server eingerichtet und Ihr erstes Skript geschrieben! Sie müssen den Server neu starten (stoppen Sie das Skript und führen Sie es dann erneut aus), wenn Sie Änderungen vornehmen.

Wenn Sie Ihre Skripts auf einem anderen Computer in demselben Netzwerk anzeigen möchten, ändern Sie sie app.run () zu:

app.run ("0.0.0.0", "5010")

Diese Linie besteht aus zwei Teilen. Beim ersten Befehl wird Flask aufgefordert, Dateien auf Ihrer lokalen IP-Adresse bereitzustellen (stellen Sie sicher, dass Sie dies als beibehalten 0,0,0,0, obwohl dies nicht Ihre IP-Adresse ist). Der zweite Teil gibt den Port an. Sie können den Port ändern, wenn Sie möchten. Führen Sie das Skript erneut aus (vergessen Sie nicht zu speichern und neu zu starten).

Sie sollten jetzt in der Lage sein, auf Ihre Skripts von einem anderen Computer im selben Netzwerk zuzugreifen. Stellen Sie sicher, dass Sie Ihre IP-Adresse verwenden (ausführen ifconfig in der Befehlszeile) und den zuvor eingegebenen Port. Sie müssen möglicherweise Ihre Firewall konfigurieren, wenn Sie eine verwenden.

Die Konsole zeigt Ihnen die HTTP-Antwort und die IP-Adresse jedes Geräts an, das eine Verbindung zu Ihrem Server herstellt:

Beachten Sie, wie der Endpunkt / df hat einen 404-Fehler zurückgegeben? Der Endpunkt ist nicht eingerichtet! Wenn Sie über das Internet darauf zugreifen möchten, sehen Sie unter Portweiterleitung nach. Was ist Portweiterleitung und wie kann sie mir helfen? [MakeUseOf erklärt] Was ist Portweiterleitung und wie kann sie mir helfen? [MakeUseOf Explains] Weinen Sie ein wenig, wenn Ihnen jemand sagt, dass es ein Problem mit der Portweiterleitung gibt, und deshalb funktioniert Ihre glänzende neue App nicht? Deine Xbox lässt dich keine Spiele spielen, deine Torrent-Downloads lehnen ab… Lesen Sie mehr .

Vorlagen

Jetzt, da Ihr Server vollständig eingerichtet ist, müssen Sie einige Vorlagen schreiben. Sie verwenden JSON, um Daten zwischen Python und Javascript zu senden. Vorlagen erleichtern dies. Wir haben darüber geschrieben, was JSON ist Was ist JSON? Überblick über Laien Was ist JSON? Überblick über Laien Egal, ob Sie ein Webentwickler sind oder nicht, es ist eine gute Idee, zumindest zu wissen, was JSON ist, warum es wichtig ist und warum es überall im Web verwendet wird. Lesen Sie mehr in der Vergangenheit, also lesen Sie weiter, wenn Sie sich nicht sicher sind.

Sie müssen eine Vorlagensprache verwenden. Jinja2 wird mit Flask geliefert, so dass keine zusätzlichen Einstellungen erforderlich sind.

Eine Templatesprache arbeitet mit einem Webserver zusammen. Es nimmt die Ausgabe Ihrer Python-Skripte (den Back-End-Code) und erleichtert die Ausgabe an den Benutzer mithilfe von HTML (dem Front-End). Es ist wichtig zu beachten, dass Vorlagen sollten nicht für die Logik verwendet werden! Behalten Sie die Logik in Python und verwenden Sie Vorlagen nur zur Anzeige der Daten. Es wird sehr unordentlich, wenn Sie versuchen, mit der Vorlage komplexer zu werden.

Erstellen Sie einen Ordner in Ihrem Projektverzeichnis mit dem Namen Vorlagen. Flask erkennt Dateien in diesem Ordner als Vorlagendateien. Platzieren Sie keine Python-Skripts hier. Hier können Sie Ihre HTML-Dateien ablegen.

Erstellen Sie eine Datei mit dem Namen index.html. Fügen Sie den folgenden Code in den Code ein:

 Name 

Auf diese Weise können Sie auf eine aufgerufene Datei zugreifen Name, die in Ihren Skripten gefunden werden. Geh zurück zu deinem json_io.py. Skript und ändern Sie die Ausgabe Funktion. Anstatt zurückzukehren Hallo Welt, Geben Sie diesen Code ein:

return render_template ("index.html", name = "Joe")

Dies wird das laden index.html Datei, die Sie zuvor erstellt haben, und ersetzen Sie die Name Vorlagen-Tag für die Zeichenfolge Joe. Sie können diese Methode verwenden, um eine beliebige Seite in Ihrem Vorlagenordner zu laden und eine beliebige Datenmenge zu übergeben.

Der Code

Da Sie nun wissen, wie Vorlagen funktionieren, haben Sie hier den vollständigen HTML-Code, den Sie benötigen. Fügen Sie dies in Ihre ein index.html Datei:

  Dadurch werden Daten mit AJAX an Python gesendet:

 Klick mich

Beachten Sie, dass dies kein CSS oder HTML-Header enthält. Diese sind für Webseiten erforderlich (dieses Beispiel funktioniert auch ohne). Schauen Sie sich also bei W3Schools nach, wenn Sie möchten.

In dieser Datei ist nicht zu viel los. Eine JSON-Liste von Rallye-Autos wird eingerichtet. Es gibt ein bisschen Text und eine Schaltfläche. Wenn die Taste gedrückt wird, jQuery wird benutzt um POST die Liste der Autos an den Server. Das wird zum gehen Empfänger Endpunkt, den Sie als Nächstes erstellen. Lesen Sie unser Handbuch zu jQuery, wenn Sie mehr darüber erfahren möchten, wie dies in diesem Kontext funktioniert.

Hier ist der Code, den Sie benötigen json_io.py:

#! flask / bin / python import sys aus flask import Flask, render_template, request, redirect, Antwortimport zufällig, json app = Flask (__ name__) @ app.route ('/') def output (): # Indexindex zurückgeben render_template ('index.html', name = "Joe") @ app.route ('/ receiver', Methods = ['POST']) def worker (): # read json + antworten data = request.get_json () = "für Element in data: # Schleife über jedes Zeilenergebnis + = str (item ['make']) + '\ n' Ergebnis zurückgeben, wenn __name__ == '__main__': # run! app.run ()

Dieser Code definiert zwei Endpunkte. Der Standardwert (/) dient der vorherigen HTML-Seite. Wenn die Taste gedrückt wird, a POST Anfrage wird an die gestellt /Empfänger Endpunkt. Der zweite Teil der Streckendefinition (Methods = ['POST']) definiert, wie auf diese Seite zugegriffen werden kann. Wie POST Nur wenn diese Option angegeben ist, werden alle anderen HTTP-Anforderungen (z. B. ERHALTEN).

Diese /Empfänger Der Endpunkt durchläuft einfach jede JSON-Zeile und hängt das Auto-Make an einen String, der nach der Schleife zurückgegeben wird. Die JSON wird im gespeichert Daten variabel und als request.get_json () verwendet wurde, weiß Python, dass dies ein JSON-Objekt ist. Das Artikel Variable innerhalb der für Schleife kann man sich wie eine Reihe von Daten vorstellen. Auf verschiedene Elemente jeder Zeile kann über den Namen in eckigen Klammern (item ['machen']).

Öffnen Sie Ihre Browser-Entwicklerwerkzeuge (CMD > ALT > ich unter Mac OS / Chrome) und navigieren Sie zum Netzwerk Tab. Drücken Sie die Taste und Sie sollten die Serverantwort sehen:

Versuchen Sie, den ursprünglichen JSON zu ändern, und sehen Sie, was passiert. Lassen Sie uns den Python modifizieren etwas unterschiedlich, je nach JSON. Hier ist der neue Code, den Sie für benötigen für Schleife:

 für Artikel in Daten: # Schleife über jede Zeile make = str (item ['make']) if (make == 'Porsche'): result + = make + '- Das ist ein guter Hersteller \ n' else: result + = make + '- Das ist nur ein durchschnittlicher Hersteller \ n' 

Hierbei wird je nach Eingabe eine einfache if -Anweisung verwendet, um die Ausgabe zu ändern. Sie können dies leicht anpassen, um in eine Datenbank zu schreiben, oder einen anderen Code ausführen. So sieht es jetzt aus:

Sie sollten jetzt ein solides Verständnis dafür haben, wie Sie einen Python-Server einrichten und wie Sie auf JSON-Anforderungen reagieren können.

Lieben Sie es, in JavaScript zu codieren? Versuchen Sie, eine sprachempfindliche Roboteranimation mit einem Skript zu erstellen. So schreiben Sie eine sprachempfindliche Roboteranimation in p5.js. Wie Sie eine sprachempfindliche Roboteranimation in p5.js schreiben können Sie möchten, dass Ihre Kinder sich für die Programmierung interessieren? Zeigen Sie ihnen diese Anleitung zum Erstellen eines animierten Roboterkopfs mit Geräuschreaktion. Weiterlesen !

Erfahren Sie mehr über: JavaScript, Python, Webentwicklung.