Come ottenere Python e JavaScript per comunicare usando JSON

Vi siete mai chiesti come inviare dati tra due linguaggi di programmazione? Hai mai provato a inviare un oggetto o più pezzi di dati?

Oggi ti mostrerò come usare JSON per inviare dati da JavaScript a Python. Tratterò su come configurare un server web, insieme a tutto il codice che ti serve.

Prerequisiti

Avrai bisogno di alcune cose per iniziare con questo progetto. Sarò in esecuzione su Mac, che ha già installato Python. Dovresti essere in grado di seguirlo abbastanza bene usando Linux. Se stai usando Windows, dovrai scaricare e installare Python, e magari rispolverare le tue abilità da linea di comando. Una guida per principianti alla riga di comando di Windows Guida per principianti alla riga di comando di Windows La riga di comando ti consente di comunicare direttamente con il tuo computer e istruirlo per eseguire varie attività. Leggi di più .

Avrai bisogno di pip, un gestore di pacchetti per Python. Questo è installato di default con versioni Python maggiori di 2.7.9.

Installazione del server

Hai bisogno di un server per servire Python ad una pagina web. Ci sono molte opzioni per questo. Se hai già configurato un server, puoi saltare questo passaggio.

Ci sono molte opzioni che potresti usare qui. Tornado è una buona scelta, così come Twisted (ho già scritto su Twisted prima per una telecamera di rete fai-da-te). Userò Flask per questo progetto.

Installa Flask usando pip (tramite la riga di comando):

pip installare Flask

Questo è tutto! Ci sono alcune opzioni da configurare, ma fornendole installate correttamente, sei a posto.

Potresti prendere in considerazione l'utilizzo di un ambiente virtuale Python Impara come usare l'ambiente virtuale Python Impara come usare l'ambiente virtuale Python Se sei uno sviluppatore Python esperto, o sei appena iniziato, imparare come configurare un ambiente virtuale è essenziale per qualsiasi progetto Python. Leggi di più, tuttavia questo è del tutto opzionale.

Installazione di Python

Crea un nuovo file nel tuo editor di testo preferito o in Integrated Development Environment (IDE). Sto usando Sublime Text 3 e PyCharm, ma uso tutto ciò che ti piace.

Ora esegui alcune impostazioni iniziali di Flask:

da flask import Flask app = Flask (__ name__)

Questo importa i moduli richiesti e configura la tua app. Ora imposta a sentiero:

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

Questo configura a sentiero, che è come una pagina di un sito web. Questo a volte può essere chiamato un endpoint o a itinerario.

Il def output () la linea definisce a funzione o metodo chiamato produzione, che verrà eseguito ogni volta che viene chiamato questo endpoint. Questi metodi non devono usare lo stesso nome dell'endpoint - chiamalo con un nome adatto. All'interno di questo metodo è un semplice Ciao mondo! stringa. Infine, configura lo script in modo che venga eseguito quando richiesto:

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

Vai avanti e salva questo script come json_io.py in una posizione adatta. Torna al tuo terminale e vai alla cartella del tuo progetto. Esegui lo script:

python json_io.py

La parola pitone è usato per dire al computer che il seguente file dovrebbe essere eseguito come uno script Python. Il nome del file in seguito è il nome del file che si desidera eseguire come Python. Se tutto funziona correttamente, dovresti vedere un messaggio di stato nel Terminale:

* In esecuzione su http://127.0.0.1:5000/ (premi CTRL + C per uscire)

Questo mostra l'indirizzo IP sul quale il server è in esecuzione, oltre alla porta. Questi saranno 127.0.0.1 e 5000. Puoi premere CTRL > C per fermare questa corsa, ma non farlo ancora.

Inserisci l'indirizzo nel tuo browser e dovresti vedere Ciao mondo! appaiono sullo schermo. Ora hai configurato correttamente un server Python e hai scritto il tuo primo script! Sarà necessario riavviare il server (interrompere lo script, quindi eseguirlo di nuovo) se si apportano modifiche.

Se desideri visualizzare i tuoi script su un altro computer sulla stessa rete, cambia app.run () a:

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

Ci sono due parti per questa linea. Il primo dice a Flask di servire i file sul tuo indirizzo IP locale (assicurati di mantenere questo come 0.0.0.0, anche se questo non è il tuo indirizzo IP). La seconda parte specifica la porta. Puoi cambiare la porta se lo desideri. Esegui nuovamente lo script (ricorda di salvare e riavviare).

Ora dovresti essere in grado di accedere ai tuoi script da un altro computer sulla stessa rete. Assicurati di usare il tuo indirizzo IP (corri ifconfig nella riga di comando) e la porta che hai inserito in precedenza. Potrebbe essere necessario configurare il firewall se ne stai utilizzando uno.

La console mostrerà la risposta HTTP e l'indirizzo IP di qualsiasi dispositivo che si connette al tuo server:

Si noti come il punto finale / df ha restituito un errore 404? L'endpoint non è impostato! Se desideri accedere a Internet, guarda il port forwarding Che cos'è il port forwarding e come può aiutarmi? [MakeUseOf Explains] Che cos'è il port forwarding e come può aiutarmi? [MakeUseOf Explains] Piangi un po 'dentro quando qualcuno ti dice che c'è un problema di port forwarding ed è per questo che la tua nuova app non funzionerà? La tua Xbox non ti permetterà di giocare, i tuoi download torrent rifiutano ... Leggi altro .

Modelli

Ora che il tuo server è tutto configurato, è tempo di scrivere alcuni modelli. Utilizzerai JSON per inviare dati tra Python e Javascript, e i modelli lo faciliteranno. Abbiamo scritto su cosa sia JSON What Is JSON? Panoramica di un Layman Cos'è JSON? Panoramica di un Layman Sia che tu abbia intenzione di diventare uno sviluppatore web o no, è una buona idea sapere almeno cosa è JSON, perché è importante e perché è usato in tutto il web. Leggi di più in passato, quindi leggi se non sei sicuro.

Dovrai usare una lingua di template. Jinja2 viene fornito con Flask, quindi non è necessaria alcuna configurazione aggiuntiva.

Un linguaggio di template funziona in combinazione con un server web. Prende l'output dei tuoi script Python (il codice back-end), e rende facile l'output all'utente utilizzando HTML (il front-end). È importante notare che i modelli dovrebbero non essere usato per la logica! Mantieni la logica in Python e usa i modelli solo per la visualizzazione dei dati. Diventa molto caotico se inizi a cercare di diventare complesso con il modello.

Creare una cartella all'interno della directory del progetto chiamata modelli. Flask riconosce i file all'interno di questa cartella come file modello. Non inserire alcuno script Python qui, questo è dove puoi mettere i tuoi file HTML.

Crea un file chiamato index.html. Al suo interno, inserisci il seguente codice:

 nome 

Questo è il modo per accedere a un dato chiamato nome, che si troverà nei tuoi script. Torna al tuo json_io.py. script e modificare il produzione funzione. Invece di tornare Ciao mondo, inserisci questo codice:

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

Questo caricherà il index.html file creato in precedenza e sostituire il file nome tag modello per la stringa Joe. È possibile utilizzare questo metodo per caricare qualsiasi pagina all'interno della cartella del modello e passare loro qualsiasi quantità di dati.

Il codice

Ora che sai come funzionano i template, ecco il codice HTML completo di cui hai bisogno. Incolla questo dentro il tuo index.html file:

  Questo invierà dati usando AJAX a Python:

 Cliccami

Nota come questo non include CSS o qualsiasi intestazione HTML. Questi sono necessari per le pagine web (questo esempio funzionerà senza di essi), quindi guardate questi in W3Schools se vi interessa.

Non c'è molto da fare in questo file. Una lista JSON di auto da rally è impostata. C'è un po 'di testo e un pulsante. Quando viene premuto il pulsante, jQuery è abituato a INVIARE la lista delle macchine al server. Questo andrà al ricevitore endpoint, che verrà creato successivamente. Assicurati di leggere la nostra guida su jQuery se vuoi saperne di più su come funziona in questo contesto.

Ecco il codice di cui hai bisogno json_io.py:

#! flask / bin / python import sys da flask import Flask, render_template, request, redirect, Response import random, json app = Flask (__ name__) @ app.route ('/') def output (): # serve template template return render_template ('index.html', name = "Joe") @ app.route ('/ receiver', methods = ['POST']) def worker (): # read json + reply data = request.get_json () result = "per l'elemento nei dati: # loop su ogni risultato riga + = str (elemento ['make']) + '\ n' restituisce risultato se __name__ == '__main__': # run! app.run ()

Questo codice definisce due endpoint. Quello predefinito (/) serve la precedente pagina html. Quando viene premuto il pulsante, a INVIARE richiesta è fatta al /ricevitore endpoint. La seconda parte della definizione della rotta (methods = ['POST']) definisce come è possibile accedere a questa pagina. Come INVIARE è l'unico modo specificato, questa rotta rifiuterà qualsiasi altra richiesta http (come ad esempio OTTENERE).

Questo /ricevitore l'endpoint scorre semplicemente su ogni riga JSON e aggiunge l'auto a una stringa, che viene quindi restituita dopo il ciclo. Il JSON è memorizzato nel dati variabile, e come il request.get_json () è stato usato, Python è consapevole che questo è un oggetto JSON. Il articolo variabile all'interno del per ciclo può essere pensato come una fila di dati. È possibile accedere a diversi elementi di ogni riga usando il loro nome tra parentesi quadre (item [ 'fare']).

Apri gli strumenti di sviluppo del tuo browser (CMD > ALT > io su Mac OS / Chrome) e vai a Rete scheda. Premi il pulsante e dovresti vedere apparire la risposta del server:

Prova a modificare il JSON iniziale e guarda cosa succede. Modifichiamo il Python da fare qualcosa diverso, a seconda del JSON. Ecco il nuovo codice che ti serve per per ciclo:

 per elemento nei dati: # loop su ogni riga make = str (oggetto ['make']) if (make == 'Porsche'): result + = make + '- Quello è un buon produttore \ n' else: result + = make + '- Quello è solo un produttore medio \ n' 

Questo usa un'istruzione if semplice per cambiare l'output, a seconda dell'input. Si potrebbe facilmente adattare questo per scrivere su un database, o eseguire un pezzo di codice diverso. Ecco come appare ora:

Ora dovresti avere una solida conoscenza di come configurare un server Python e come puoi rispondere alle richieste JSON.

Ti piace codificare in JavaScript? Prova a creare script di un'animazione robot sensibile alla voce Come eseguire lo script di un'animazione di robot sensibile alla voce in p5.js Come creare un'animazione di un robot sensibile alla voce in p5.js Vuoi interessare i tuoi bambini alla programmazione? Mostra loro questa guida per costruire una testa robotica sana e reattiva. Leggi di più !

Scopri di più su: JavaScript, Python, Sviluppo Web.