Så här får du Python och JavaScript att kommunicera med JSON

Har du någonsin undrat hur du skickar data mellan två programmeringsspråk? Har någonsin försökt att skicka ett objekt eller flera bitar av data?

Idag visar jag dig hur du använder JSON för att skicka data från JavaScript till Python. Jag kommer att täcka hur du installerar en webbserver, tillsammans med all kod du behöver.

förutsättningar

Du behöver några saker att komma igång med det här projektet. Jag kör på Mac, som Python redan har installerat. Du borde kunna följa med ganska bra med Linux. Om du använder Windows måste du ladda ner och installera Python och kanske borsta upp dina kommandoradsfärdigheter. En nybörjarhandbok till Windows Command Line En nybörjarhandbok till Windows Command Line Kommandoraden låter dig kommunicera direkt med datorn och instruera det att utföra olika uppgifter. Läs mer .

Du behöver pip, en pakethanterare för Python. Detta installeras som standard med Python-versioner större än 2.7.9.

Serverinställningar

Du behöver en server till tjäna Python till en webbsida. Det finns många alternativ för detta. Om du redan har en serverinställning kan du hoppa över det här steget.

Det finns många alternativ du kan använda här. Tornado är ett bra val, som Twisted (jag har skrivit om Twisted för en DIY nätverkskamera). Jag använder kolven för det här projektet.

Installera kolven med pip (via kommandoraden):

pip installera flaskan

Det är allt! Det finns några alternativ att installera, men om det är korrekt installerat, är det bra att gå.

Du kanske vill överväga att använda en Python Virtual Environment Lär dig hur du använder Python Virtual Environment Lär dig hur du använder Python Virtual Environment Om du är en erfaren Python-utvecklare, eller om du bara har börjat, är det viktigt att du lär dig hur du installerar en virtuell miljö. för något Python-projekt. Läs mer, men det här är helt frivilligt.

Python Setup

Skapa en ny fil i din favorit textredigerare eller Integrerad utvecklingsmiljö (IDE). Jag använder Sublime Text 3 och PyCharm, men använd vad du än är bekväm med.

Gör nu en viss inledande inställning av Flask:

från kolv import Flask app = Flask (__ namn__)

Detta importerar de obligatoriska modulerna och konfigurerar din app. Ställ nu upp en väg:

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

Detta konfigurerar a väg, vilket är som en sida på en webbplats. Detta kan ibland kallas en slutpunkt eller a rutt.

De def output () rad definierar a fungera eller metod kallad produktion, som kommer att köras när denna slutpunkt kallas. Dessa metoder behöver inte använda samma namn som slutpunkten - kalla det något lämpligt namn. Inuti är denna metod enkel Hej världen! sträng. Slutligen konfigurera ditt skript för att faktiskt köra när det begärs:

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

Fortsätt och spara det här skriptet som json_io.py på en lämplig plats. Gå tillbaka till din terminal och navigera till din projektmapp. Kör skriptet:

python json_io.py

Ordet pytonorm används för att berätta för datorn att följande fil ska köras som ett Python-skript. Filnamnet efteråt är namnet på filen du vill köra som Python. Om allt fungerar korrekt bör du se ett statusmeddelande i terminalen:

* Kör på http://127.0.0.1:5000/ (Tryck på CTRL + C för att avsluta)

Detta visar dig vilken IP-adress din server kör, liksom porten. Dessa kommer att vara 127.0.0.1 och 5000. Du kan trycka på CTRL > C för att stoppa det här, men gör det inte just ännu.

Ange adressen i din webbläsare, och du borde se Hej världen! visas på skärmen. Du har nu lyckats konfigurera en Python-server och skrivit ditt första skript! Du måste starta om servern (stoppa skriptet och kör sedan igen) om du gör några ändringar.

Om du vill visa dina skript på en annan dator i samma nätverk ändras app.run () till:

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

Det finns två delar till den här raden. Den första berättar Flask att betjäna filer på din lokala IP-adress (se till att du behåller detta som 0.0.0.0, även om det inte är din IP-adress). Den andra delen anger porten. Du kan ändra porten om du vill. Kör skriptet igen (kom ihåg att spara och starta om).

Du ska nu kunna komma åt dina skript från en annan dator i samma nätverk. Se till att du använder din IP-adress (kör ifconfig i kommandoraden) och porten du skrev in tidigare. Du kan behöva konfigurera din brandvägg om du använder en.

I konsolen visas HTTP-svaret och IP-adressen till en enhet som ansluter till din server:

Lägg märke till hur slutpunkten är / df returnerade ett 404 fel? Slutpunkten är inte inställd! Om du vill få tillgång till detta via internet, kolla in portpresentation Vad är port vidarebefordran och hur kan det hjälpa mig? [MakeUseOf Explains] Vad är port vidarebefordran och hur kan det hjälpa mig? [MakeUseOf Explains] Skriker du lite inuti när någon säger att det finns ett portproblem och det är därför att din glänsande nya app inte fungerar? Din Xbox låter dig inte spela spel, dina torrentladdningar vägrar ... Läs mer .

mallar

Nu när din server är inställd, är det dags att skriva några mallar. Du kommer att använda JSON för att skicka data mellan Python och Javascript, och mallar underlättar detta. Vi har skrivit om vad JSON är What Is JSON? A Laymans översikt Vad är JSON? En Laymans översikt Oavsett om du planerar att vara webbutvecklare eller inte, är det en bra idé att åtminstone veta vad som är JSON, varför det är viktigt och varför det används över hela webben. Läs mer i det förflutna, så läs upp om du inte är säker.

Du måste använda ett templerande språk. Jinja2 levereras med Flask, så det behövs ingen extra setup.

Ett templerande språk fungerar tillsammans med en webbserver. Det tar utdata från dina Python-skript (back-end-koden), och gör det enkelt att skriva ut till användaren med hjälp av HTML (fronten). Det är viktigt att notera att mallar ska inte användas för logik! Håll logiken i Python och använd mallar endast för att visa data. Det blir väldigt rörigt om du börjar försöka bli komplex med mallen.

Skapa en mapp i din projektkatalog som heter mallar. Flask känner igen filer i den här mappen som mallfiler. Placera inte några Python-skript här, det är här du kan lägga till dina HTML-filer.

Skapa en fil som heter index.html. Inne i den, sätt följande kod:

 namn 

Detta är sättet att komma åt en bit av data som heter namn, som finns i dina skript. Gå tillbaka till din json_io.py. skript och ändra produktion fungera. I stället för att återvända Hej världen, skriv in den här koden:

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

Detta laddar upp index.html fil du skapade tidigare och ersätt namn mall tagg för strängen Joe. Du kan använda den här metoden för att ladda vilken sida som helst i din mallmapp och skicka dem all data.

Koden

Nu när du vet hur mallar fungerar, här är den fullständiga HTML-koden du behöver. Klistra in det här inuti din index.html fil:

  Detta kommer att skicka data med AJAX till Python:

 Klicka här

Lägg märke till hur det här inte ingår CSS eller några HTML-rubriker. Dessa krävs för webbsidor (detta exempel fungerar utan dem), så titta på dem på W3Schools om du bryr dig om.

Det finns inte så mycket som händer i den här filen. En JSON-lista över rallybilar är inställd. Det finns lite text och en knapp. När knappen trycks ned, jQuery är van att POSTA listan över bilar till servern. Detta kommer att gå till mottagare slutpunkt, som du kommer att skapa nästa. Se till att du läser vår guide till jQuery om du vill lära dig mer om hur det fungerar i det här sammanhanget.

Här är koden du behöver för json_io.py:

#! kolv / bin / python importera sys från kolv import Flask, render_template, request, omdirigering, Respons Import Import, json app = Flask (__ name__) @ app.route ('/') def output render_template ('index.html', name = "Joe") @ app.route ('/ receiver', methods = ['POST']) def worker (): # läs json + svar data = request.get_json = "för objekt i data: # loop över varje rad resultat + = str (objekt ['make']) + '\ n' returresultat om __name__ == '__main__': # run! app.run

Denna kod definierar två ändpunkter. Standard-ett (/) tjänar den tidigare html-sidan. När knappen trycks in, a POSTA begäran lämnas till /mottagare slutpunkt. Den andra delen av färdvägsdefinitionen (metoder = ['POST']) definierar hur denna sida kan nås. Som POSTA är det enda sättet som anges, kommer denna rutt att neka andra http-förfrågningar (t.ex. SKAFFA SIG).

Detta /mottagare slutpunkten slår bara över varje JSON-rad och lägger bilens märke till en sträng, som sedan återkommer efter loopen. JSON är lagrad i data variabel och som request.get_json () användes, Python är medveten om att detta är ett JSON-objekt. De Artikel variabel inuti för loop kan anses som en rad av data. Olika element i varje rad kan nås genom att använda deras namn i kvadratkonsoler (objekt [ 'make']).

Öppna verktygen för webbutvecklare (CMD > ALT > jag på Mac OS / Chrome) och navigera till nätverk flik. Tryck på knappen, och du ska se serverns svar visas:

Försök att ändra den ursprungliga JSON och se vad som händer. Låt oss ändra Python att göra något olika beroende på JSON. Här är den nya koden du behöver för för loop:

 för objekt i data: # loop över varje rad gör = str (objekt ['make']) om (gör == 'Porsche'): result + = make + '- Det är en bra tillverkare \ n' else: result + = make + '- Det är bara en genomsnittlig tillverkare \ n' 

Detta använder ett enkelt if-förklaring för att ändra utdata, beroende på ingången. Du kan enkelt anpassa det här för att skriva till en databas, eller köra en annan kod. Så här ser det ut nu:

Du borde nu ha en gedigen förståelse för hur du konfigurerar en Python-server och hur du kan svara på JSON-förfrågningar.

Tycker du om att du kodar i JavaScript? Prova att skripta en röstkänslig robotanimering Hur man skriver en röstsensitiv robot animation i p5.js Hur man skriver en röstsensiv robot animation i p5.js Vill du få dina barn intresserade av programmering? Visa dem den här guiden för att bygga ett ljudaktivt animerat robothuvud. Läs mer !

Utforska mer om: JavaScript, Python, webbutveckling.