Slik får du Python og JavaScript til å kommunisere ved hjelp av JSON

Noen gang lurt på hvordan du sender data mellom to programmeringsspråk? Noen gang har prøvd å sende et objekt eller flere datatyper?

I dag viser jeg deg hvordan du bruker JSON til å sende data fra JavaScript til Python. Jeg skal dekke hvordan du konfigurerer en webserver, sammen med all koden du trenger.

Forutsetninger

Du trenger et par ting å komme i gang med dette prosjektet. Jeg kjører på Mac, som Python allerede har installert. Du bør kunne følge med på en god måte å bruke Linux. Hvis du bruker Windows, må du laste ned og installere Python og kanskje børste opp på kommandolinjevitenskapene. En nybegynners guide til Windows Command Line En nybegynners guide til Windows Command Line Kommandolinjen lar deg kommunisere direkte med datamaskinen din og instruer den til å utføre ulike oppgaver. Les mer .

Du trenger pip, en pakkebehandling for Python. Dette er installert som standard med Python-versjoner som er større enn 2.7.9.

Serveroppsett

Du trenger en server til tjene Python til en nettside. Det er mange alternativer for dette. Hvis du allerede har et serveroppsett, kan du hoppe over dette trinnet.

Det er mange alternativer du kan bruke her. Tornado er et godt valg, som er Twisted (jeg har skrevet om Twisted før for et DIY nettverkskamera). Jeg skal bruke flaske for dette prosjektet.

Installer flaske med pip (via kommandolinjen):

pip installasjonskolbe

Det er det! Det er noen alternativer å sette opp, men å sørge for at den er installert riktig, er du god til å gå.

Du kan kanskje vurdere å bruke et Python virtuelt miljø Lær hvordan du bruker Python Virtual Environment Lær hvordan du bruker Python Virtual Environment Uansett om du er en erfaren Python-utvikler, eller du er bare i gang, lærer du hvordan du konfigurerer et virtuelt miljø, er avgjørende. for ethvert Python-prosjekt. Les mer, men dette er helt valgfritt.

Python Setup

Opprett en ny fil i din favoritt tekstredigerer eller Integrated Development Environment (IDE). Jeg bruker Sublime Text 3 og PyCharm, men bruk det du er komfortabel med.

Gjør nå noen innledende oppsett av Flask:

fra kolbe import Flask app = Kolbe (__ name__)

Dette importerer de nødvendige modulene og konfigurerer appen din. Nå sett opp a sti:

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

Dette konfigurerer a sti, som er som en side på et nettsted. Dette kan noen ganger kalles en endepunkt eller a rute.

De def output () linje definerer a funksjon eller metode kalt produksjon, som vil løpe når dette sluttpunktet kalles. Disse metodene trenger ikke å bruke samme navn som sluttpunktet - kaller det et passende navn. Innsiden er denne metoden enkel Hei Verden! streng. Endelig, sett opp skriptet ditt for å faktisk kjøre når det blir bedt om det:

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

Gå videre og lagre dette skriptet som json_io.py på et passende sted. Gå tilbake til Terminal og naviger til prosjektmappen din. Kjør skriptet:

python json_io.py

Ordet python brukes til å fortelle datamaskinen at følgende fil skal kjøres som et Python-skript. Filnavnet etterpå er navnet på filen du vil kjøre som Python. Hvis alt fungerer riktig, bør du se en statusmelding i Terminal:

* Kjører på http://127.0.0.1:5000/ (Trykk CTRL + C for å avslutte)

Dette viser deg IP-adressen serveren din kjører på, samt porten. Disse vil være 127.0.0.1 og 5000. Du kan trykke CTRL > C å stoppe dette kjører, men gjør det ikke akkurat ennå.

Skriv inn adressen i nettleseren din, og du bør se Hei Verden! vises på skjermen. Du har nå satt opp en Python-server og skrevet ditt første skript! Du må starte serveren på nytt (stopp scriptet, kjør det igjen) hvis du gjør noen endringer.

Hvis du vil vise skriptene dine på en annen datamaskin på samme nettverk, endrer du app.run () til:

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

Det er to deler til denne linjen. Den første forteller Flask å vise filer på din lokale IP-adresse (sørg for at du beholder dette som 0.0.0.0, selv om det ikke er din IP-adresse). Den andre delen angir porten. Du kan endre porten hvis du vil. Kjør skriptet igjen (husk å lagre og starte om igjen).

Du bør nå kunne få tilgang til skriptene fra en annen datamaskin på samme nettverk. Pass på at du bruker IP-adressen din (kjør ifconfig i kommandolinjen) og porten du skrev inn tidligere. Du må kanskje konfigurere brannmuren din hvis du bruker en.

Konsollen viser deg HTTP-responsen og IP-adressen til en hvilken som helst enhet som kobler til serveren din:

Legg merke til hvordan sluttpunktet / df returnerte en 404 feil? Endepunktet er ikke oppsett! Hvis du ønsker å få tilgang til dette via Internett, se på port videresending Hva er port videresending og hvordan kan det hjelpe meg? [MakeUseOf Forklarer] Hva er port videresending og hvordan kan det hjelpe meg? [MakeUseOf Forklarer] Skriker du litt innvendig når noen forteller deg at det er et problem med portoverføring, og derfor vil din skinnende nye app ikke fungere? Din Xbox vil ikke la deg spille spill, dine torrent nedlastinger nekte ... Les mer .

maler

Nå som serveren din er installert, er det på tide å skrive noen maler. Du vil bruke JSON til å sende data mellom Python og Javascript, og maler letter dette. Vi har skrevet om hva JSON er Hva er JSON? A Laymans oversikt Hva er JSON? En Laymans oversikt Enten du planlegger å være en webutvikler eller ikke, er det en god ide å minst vite hva som er JSON, hvorfor det er viktig, og hvorfor det brukes over hele nettet. Les mer i fortiden, så les videre hvis du ikke er sikker.

Du må bruke et templerende språk. Jinja2 leveres med Flask, så det er ikke nødvendig med ekstra oppsett.

Et templerende språk fungerer sammen med en webserver. Det tar utdataene fra Python-skriptene (back-end-koden), og gjør det enkelt å sende ut til brukeren ved hjelp av HTML (frontend). Det er viktig å merke seg at maler skal ikke brukes til logikk! Hold logikken i Python, og bruk maler bare for visning av dataene. Det blir veldig rotete hvis du begynner å prøve å bli kompleks med malen.

Lag en mappe inne i prosjektkatalogen din maler. Flask gjenkjenner filer i denne mappen som malfiler. Ikke legg inn noen Python-skript her, det er her du kan sette HTML-filene dine.

Opprett en fil som heter index.html. Inne i den, plasser følgende kode:

 Navn 

Dette er måten å få tilgang til et dataopptak Navn, som vil bli funnet inne i skriptene dine. Gå tilbake til din json_io.py. skript og endre produksjon funksjon. I stedet for å returnere Hei Verden, skriv inn denne koden:

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

Dette vil laste inn index.html fil du opprettet tidligere, og erstatt Navn mal tag for strengen Joe. Du kan bruke denne metoden til å laste inn en side i malmappen din, og sende dem en mengde data.

Koden

Nå som du vet hvordan maler fungerer, her er den fulle HTML-koden du trenger. Lim inn dette i din index.html fil:

  Dette vil sende data ved hjelp av AJAX til Python:

 Klikk på meg

Legg merke til hvordan dette ikke inkluderer CSS, eller noen HTML-overskrifter. Disse kreves for nettsider (dette eksemplet vil fungere uten dem), så se på disse på W3Schools hvis du bryr deg om.

Det er ikke for mye skjer i denne filen. En JSON-liste over rallybiler er oppsett. Det er litt tekst og en knapp. Når du trykker på knappen, jQuery er vant til POST listen over biler til serveren. Dette vil gå til mottaker endepunkt, som du vil opprette neste. Sørg for at du leser vår guide til jQuery hvis du vil lære mer om hvordan det fungerer i denne konteksten.

Her er koden du trenger for json_io.py:

#! flask / bin / python import sys fra kolbe import Flask, render_template, forespørsel, omdirigere, Respons import tilfeldig, json app = Flask (__ name__) @ app.route ('/') def output render_template ('index.html', navn = "Joe") @ app.route ('/ mottaker', metoder = ['POST']) def worker (): # les json + svar data = request.get_json = "for element i data: # loop over hver rad resultat + = str (element ['make']) + '\ n' returresultat hvis __name__ == '__main__': # run! app.run

Denne koden definerer to endepunkter. Standard-en (/) serverer den forrige html-siden. Når du trykker på knappen, a POST forespørsel er gjort til / mottaker endepunkt. Den andre delen av rutediagrammet (metoder = ['POST']) definerer hvordan denne siden kan nås. Som POST er den eneste måten som er oppgitt, denne ruten nekter andre http-forespørsler (for eksempel FÅ).

Dette / mottaker Endpoint slår bare over hver JSON-rad, og legger bilens merke til en streng, som deretter kommer tilbake etter løkken. JSON er lagret i data variabel, og som request.get_json () ble brukt, Python er klar over at dette er et JSON objekt. De punkt variabel inne i for sløyfe kan tenkes som en rad med data. Ulike elementer i hver rad kan nås ved å bruke navnet i firkantede parenteser (element [ 'gjør']).

Åpne nettleserens utviklerverktøy (CMD > ALT > Jeg på Mac OS / Chrome), og naviger til nettverk fane. Trykk på knappen, og du bør se serverresponsen vises:

Prøv å endre den første JSON og se hva som skjer. La oss endre Python å gjøre noe forskjellig, avhengig av JSON. Her er den nye koden du trenger for for sløyfe:

 for element i data: # loop over hver rad gjør = str (element ['make']) hvis (gjør == 'Porsche'): result + = make + '- Det er en god produsent \ n' annet: resultat + = gjør + '- Det er bare en gjennomsnittlig produsent \ n' 

Dette bruker en enkel hvis setning for å endre utgangen, avhengig av inngangen. Du kan enkelt tilpasse dette til å skrive til en database, eller kjøre et annet stykke kode. Slik ser det ut nå:

Du bør nå ha en solid forståelse av hvordan du konfigurerer en Python-server, og hvordan du kan svare på JSON-forespørsler.

Liker du koding i JavaScript? Prøv å skripte en stemmefølsom robot animasjon Hvordan skrive en stemmefølsom robot animasjon i p5.js Hvordan skrive en stemmefølsom robot animasjon i p5.js Ønsker du å få barna dine interessert i programmering? Vis dem denne veiledningen for å bygge et lydreaktivt animert robothodet. Les mer !

Utforsk mer om: JavaScript, Python, Webutvikling.