Hoe u Python en JavaScript kunt laten communiceren met JSON

Heeft u zich ooit afgevraagd hoe u gegevens tussen twee programmeertalen moet verzenden? Ooit geprobeerd om een ​​object of meerdere stukjes gegevens te verzenden?

Vandaag laat ik u zien hoe u JSON kunt gebruiken om gegevens van JavaScript naar Python te verzenden. Ik zal bespreken hoe je een webserver installeert, samen met alle code die je nodig hebt.

voorwaarden

Je hebt een paar dingen nodig om aan de slag te gaan met dit project. Ik zal op Mac draaien, waarop Python al is geïnstalleerd. Je zou redelijk goed kunnen volgen met Linux. Als u Windows gebruikt, moet u Python downloaden en installeren en misschien uw commandoregelvaardigheden oppoetsen. Een beginnershandleiding voor de Windows-opdrachtregel Een beginnershandleiding voor de Windows-opdrachtregel Via de opdrachtregel kunt u rechtstreeks met uw computer communiceren. en instrueer het om verschillende taken uit te voeren. Lees verder .

Je hebt pip nodig, een pakketbeheerder voor Python. Dit wordt standaard geïnstalleerd met Python-versies groter dan 2.7.9.

Server instellingen

U heeft een server nodig voor dienen Python naar een webpagina. Hier zijn veel opties voor. Als u al een serverconfiguratie hebt, kunt u deze stap overslaan.

Er zijn veel opties die u hier kunt gebruiken. Tornado is een goede keuze, net als Twisted (ik heb eerder over Twisted geschreven voor een DIY netwerkcamera). Ik zal Flask gebruiken voor dit project.

Installeer Flask met behulp van pip (via de opdrachtregel):

pip installeren Flask

Dat is het! Er zijn een paar opties om in te stellen, maar als u deze correct installeert, bent u klaar om te gaan.

Misschien wilt u overwegen om een ​​virtuele omgeving van Python te gebruiken Leer hoe u de virtuele omgeving van Python kunt gebruiken Leer hoe u de virtuele omgeving van Python kunt gebruiken Of u nu een ervaren Python-ontwikkelaar bent, of u bent nog maar net begonnen, het leren van een virtuele omgeving is essentieel voor elk Python-project. Lees meer, maar dit is volledig optioneel.

Python-installatie

Maak een nieuw bestand in uw favoriete teksteditor of Integrated Development Environment (IDE). Ik gebruik Sublime Text 3 en PyCharm, maar gebruik alles waarmee u vertrouwd bent.

Voer nu een eerste initiële setup van Flask uit:

van de flacon importeren Flask app = Flask (__ name__)

Hiermee importeert u de vereiste modules en configureert u uw app. Stel nu een pad:

@ app.route ("/ output") def output (): return "Hello World!"

Hiermee configureert u een pad, wat lijkt op een pagina van een website. Dit kan soms een worden genoemd eindpunt of a route.

De def output () regel definieert a functie of methode riep uitgang, die wordt uitgevoerd wanneer dit eindpunt wordt aangeroepen. Deze methoden hoeven niet dezelfde naam te gebruiken als het eindpunt - noem het een geschikte naam. Binnen deze methode is een eenvoudig Hallo Wereld! draad. Stel tot slot uw script in om daadwerkelijk uit te voeren wanneer dit wordt aangevraagd:

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

Ga je gang en bewaar dit script als json_io.py op een geschikte locatie. Ga terug naar je Terminal en navigeer naar je projectmap. Voer het script uit:

python json_io.py

Het woord Python wordt gebruikt om de computer te laten weten dat het volgende bestand moet worden uitgevoerd als een Python-script. De bestandsnaam achteraf is de naam van het bestand dat u als Python wilt uitvoeren. Als alles goed werkt, ziet u een statusbericht in de Terminal:

* Draait op http://127.0.0.1:5000/ (Druk op CTRL + C om te stoppen)

Dit toont u het IP-adres waarop uw server draait, evenals de poort. Deze zullen zijn 127.0.0.1 en 5000. U kunt op drukken CTRL > C om dit te stoppen, maar doe dat nog niet.

Voer het adres in uw browser in, en u zou het moeten zien Hallo Wereld! verschijnen op het scherm. Je hebt nu met succes een Python-server opgezet en je eerste script geschreven! U moet de server opnieuw opstarten (stop het script en voer het opnieuw uit) als u wijzigingen aanbrengt.

Als u uw scripts op een andere computer op hetzelfde netwerk wilt bekijken, wijzigt u app.run () naar:

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

Deze regel bestaat uit twee delen. De eerste vertelt Flask om bestanden op uw lokale IP-adres weer te geven (zorg ervoor dat u dit zo houdt 0.0.0.0, ook al is dat niet je IP-adres). Het tweede deel geeft de poort aan. U kunt de poort wijzigen als u dat wilt. Voer het script opnieuw uit (vergeet niet om het op te slaan en opnieuw op te starten).

U zou nu toegang moeten hebben tot uw scripts vanaf een andere computer op hetzelfde netwerk. Zorg ervoor dat u uw IP-adres gebruikt (uitvoeren ifconfig in de opdrachtregel) en de eerder ingevoerde poort. Mogelijk moet u uw firewall configureren als u er een gebruikt.

De console toont u de HTTP-reactie en het IP-adres van elk apparaat dat verbinding maakt met uw server:

Let op hoe het eindpunt / df heeft een 404-fout geretourneerd? Het eindpunt is niet ingesteld! Als u via internet toegang wilt, onderzoek dan poortdoorsturing Wat is poortdoorsturing en hoe kan dit mij helpen? [MakeUseOf Explains] Wat is Port Forwarding en hoe kan het mij helpen? [MakeUseOf Explains] Huil je een beetje naar binnen als iemand je vertelt dat er een probleem is met de poortdoorsturing en daarom zal je glanzende nieuwe app niet werken? Je Xbox laat je geen games spelen, je torrent downloads weigeren ... Lees meer .

templates

Nu uw server helemaal is ingesteld, is het tijd om enkele sjablonen te schrijven. U gebruikt JSON om gegevens tussen Python en Javascript te verzenden, en sjablonen vergemakkelijken dit. We hebben geschreven over wat JSON is Wat is JSON? Overzicht van A Layman Wat is JSON? Het overzicht van A Layman Of u nu een webontwikkelaar wilt zijn of niet, het is een goed idee om op zijn minst te weten wat JSON is, waarom het belangrijk is en waarom het overal op internet wordt gebruikt. Lees meer in het verleden, dus lees het verhaal als u het niet zeker weet.

U moet een sjablonerende taal gebruiken. Jinja2 wordt geleverd met Flask, dus er is geen extra setup nodig.

Een templating-taal werkt in combinatie met een webserver. Het neemt de uitvoer van je Python-scripts (de back-end-code) en maakt het gemakkelijk om naar de gebruiker te sturen met HTML (de front-end). Het is belangrijk om te weten dat sjablonen dit zouden moeten zijn niet wordt gebruikt voor logica! Bewaar de logica in Python en gebruik sjablonen enkel en alleen voor het weergeven van de gegevens. Het wordt erg rommelig als je begint te proberen ingewikkeld te worden met de sjabloon.

Maak een map in uw projectmap genaamd templates. Flask herkent bestanden in deze map als sjabloonbestanden. Plaats hier geen Python-scripts, hier kunt u uw HTML-bestanden plaatsen.

Maak een bestand met de naam index.html. Plaats daarbinnen de volgende code:

 naam 

Dit is de manier om toegang te krijgen tot een stuk data dat wordt genoemd naam, welke te vinden is in je scripts. Ga terug naar jouw json_io.py. script en wijzig de uitgang functie. In plaats van terug te keren Hallo Wereld, voer deze code in:

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

Hierdoor wordt de index.html bestand dat u eerder hebt gemaakt en vervangt het naam sjabloon tag voor de string Joe. U kunt deze methode gebruiken om elke pagina in uw sjabloonmap te laden en deze elke hoeveelheid gegevens door te geven.

De code

Nu u weet hoe sjablonen werken, hier is de volledige HTML-code die u nodig hebt. Plak dit in je index.html het dossier:

  Hiermee worden gegevens verzonden met AJAX naar Python:

 Klik hier

Merk op hoe dit geen CSS of HTML-headers omvat. Deze zijn vereist voor webpagina's (dit voorbeeld zal zonder deze werken), dus bekijk deze op W3Schools als u wilt.

Er is niet veel te doen in dit bestand. Een JSON-lijst met rallyauto's is ingesteld. Er is een stukje tekst en een knop. Wanneer op de knop wordt gedrukt, jQuery is gewend aan POST de lijst met auto's naar de server. Dit gaat naar de ontvanger eindpunt, dat u vervolgens gaat creëren. Lees onze gids voor jQuery als je meer wilt weten over hoe dat werkt in deze context.

Hier is de code die je nodig hebt json_io.py:

#! kolf / bin / python import sys uit kolf importeren Kolf, render_template, verzoek, omleiding, willekeurige reactie-import, json app = kolf (__ name__) @ app.route ('/') def-uitvoer (): # serve-indexsjabloonretour render_template ('index.html', name = "Joe") @ app.route ('/ receiver', methods = ['POST']) def worker (): # read json + reply data = request.get_json () resultaat = "voor item in data: # loop over elke rij resultaat + = str (item ['make']) + '\ n' resultaat teruggeven als __name__ == '__main__': # run! app.run ()

Deze code definieert twee eindpunten. De standaard (/) dient de vorige html-pagina. Wanneer de knop wordt ingedrukt, POST er wordt een verzoek ingediend bij de /ontvanger eindpunt. Het tweede deel van de routedefinitie (methoden = ['POST']) definieert hoe deze pagina kan worden geopend. Zoals POST is de enige manier om te specificeren, deze route zal andere http-verzoeken (zoals KRIJGEN).

Deze /ontvanger eindpunt leidt gewoon over elke JSON-rij en voegt het automerk aan een tekenreeks toe, die vervolgens na de lus wordt geretourneerd. De JSON wordt opgeslagen in de gegevens variabele, en als de request.get_json () werd gebruikt, weet Python dat dit een JSON-object is. De item variabele binnen de for loop kan worden gezien als een rij gegevens. Verschillende elementen van elke rij zijn toegankelijk door hun naam tussen vierkante haken te gebruiken (Item [ 'maken']).

Open je browserontwikkelaarstools (CMD > ALT > ik op Mac OS / Chrome), en navigeer naar de netwerk tab. Druk op de knop en u zou het serverantwoord moeten zien verschijnen:

Probeer de oorspronkelijke JSON te wijzigen en kijk wat er gebeurt. Laten we de Python aanpassen om te doen iets anders, afhankelijk van de JSON. Hier is de nieuwe code die je nodig hebt voor de for loop:

 voor item in data: # loop over elke rij make = str (item ['make']) if (make == 'Porsche'): result + = make + '- Dat is een goede fabrikant \ n' else: resultaat + = make + '- dat is slechts een gemiddelde fabrikant \ n' 

Dit gebruikt een eenvoudige if-instructie om de uitvoer te wijzigen, afhankelijk van de invoer. Je zou dit gemakkelijk kunnen aanpassen om naar een database te schrijven of een ander stuk code uit te voeren. Hier is hoe het er nu uitziet:

U moet nu een goed begrip hebben van hoe u een Python-server kunt instellen en hoe u op JSON-verzoeken kunt reageren.

Houd je van coderen in JavaScript? Probeer een stemgevoelige robotanimatie te scripten Hoe een stemgevoelige robot-animatie in te stellen in p5.js Een stemgevoelige robot-animatie in p5.js schrijven Wilt u uw kinderen interesseren voor programmeren? Laat ze deze gids zien voor het bouwen van een geluid reactieve geanimeerde robotkop. Lees verder !

Ontdek meer over: JavaScript, Python, Webontwikkeling.