Cómo obtener Python y JavaScript para comunicarse utilizando JSON

¿Alguna vez te has preguntado cómo enviar datos entre dos lenguajes de programación? Alguna vez ha intentado enviar un objeto o múltiples datos.?

Hoy les mostraré cómo usar JSON para enviar datos desde JavaScript a Python. Cubriré cómo configurar un servidor web, junto con todo el código que necesita.

Prerrequisitos

Necesitará algunas cosas para comenzar con este proyecto. Estaré ejecutando en Mac, que ya tiene instalado Python. Deberías poder seguir razonablemente bien el uso de Linux. Si está utilizando Windows, deberá descargar e instalar Python, y tal vez mejorar sus habilidades en la línea de comandos. Una guía para principiantes a la línea de comandos de Windows. Una guía para principiantes a la línea de comandos de Windows. La línea de comandos le permite comunicarse directamente con su computadora e instruirlo para realizar diversas tareas. Lee mas .

Necesitará pip, un gestor de paquetes para Python. Esto se instala de forma predeterminada con versiones de Python superiores a 2.7.9.

Configuración del servidor

Necesitas un servidor para servir Python a una página web. Hay muchas opciones para esto. Si ya tiene una configuración de servidor, puede omitir este paso..

Hay muchas opciones que podrías usar aquí. El tornado es una buena opción, ya que es Twisted (he escrito sobre Twisted antes para una cámara de red DIY). Estaré usando Flask para este proyecto.

Instale Flask usando pip (a través de la línea de comando):

pip instalar frasco

¡Eso es! Hay algunas opciones para configurar, pero si lo instala correctamente, está listo para comenzar.

Es posible que desee considerar la posibilidad de utilizar un entorno virtual de Python. Cómo utilizar el entorno virtual de Python. Cómo utilizar el entorno virtual de Python. Si usted es un desarrollador experimentado de Python, o simplemente está empezando, aprender a configurar un entorno virtual es esencial. para cualquier proyecto de Python. Leer más, sin embargo esto es completamente opcional.

Configuración de Python

Cree un nuevo archivo en su editor de texto favorito o entorno de desarrollo integrado (IDE). Estoy usando Sublime Text 3 y PyCharm, pero uso cualquier cosa con la que te sientas cómodo..

Ahora realice alguna configuración inicial de Flask:

desde matraz import Aplicación de matraz = Matraz (__ nombre__)

Esto importa los módulos requeridos y configura su aplicación. Ahora configura un camino:

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

Esto configura un camino, que es como una página de un sitio web. Esto a veces se puede llamar un punto final o un ruta.

los salida def () línea define un función o método llamado salida, que se ejecutará siempre que se llame a este punto final. Estos métodos no tienen que usar el mismo nombre que el punto final; llámelo como un nombre adecuado. Dentro de este método hay un simple Hola Mundo! cuerda. Finalmente, configure su script para que realmente se ejecute cuando se solicite:

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

Sigue adelante y guarda este script como json_io.py en un lugar adecuado. Vuelva a su Terminal y navegue a la carpeta de su proyecto. Ejecutar el script:

python json_io.py

La palabra pitón se utiliza para indicar a la computadora que el siguiente archivo debe ejecutarse como un script de Python. El nombre del archivo posteriormente es el nombre del archivo que desea ejecutar como Python. Si todo funciona correctamente, debería ver un mensaje de estado en la Terminal:

* Se ejecuta en http://127.0.0.1:5000/ (Presione CTRL + C para salir)

Esto le muestra la dirección IP en la que se está ejecutando su servidor, así como el puerto. Estos serán 127.0.0.1 y 5000. Puede presionar CTRL > do para detener esta ejecución, pero no hagas eso todavía.

Ingrese la dirección en su navegador, y debería ver Hola Mundo! Aparecen en la pantalla. ¡Ya ha configurado con éxito un servidor Python y ha escrito su primer script! Deberá reiniciar el servidor (detenga el script y luego ejecútelo nuevamente) si realiza algún cambio.

Si desea ver sus scripts en una computadora diferente en la misma red, cambie app.run () a:

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

Hay dos partes en esta línea. El primero le dice a Flask que sirva archivos en su dirección IP local (asegúrese de mantener esto como 0.0.0.0, aunque esa no sea su dirección IP). La segunda parte especifica el puerto. Puede cambiar el puerto si lo desea. Ejecute el script nuevamente (recuerde guardar y reiniciar).

Ahora debería poder acceder a sus scripts desde una computadora diferente en la misma red. Asegúrese de usar su dirección IP (ejecutar ifconfig en la línea de comando) y el puerto que ingresó anteriormente. Es posible que necesite configurar su firewall si está usando uno.

La consola le mostrará la respuesta HTTP y la dirección IP de cualquier dispositivo que se conecte a su servidor:

Observe cómo el punto final / df devolvió un error 404? El punto final no está configurado! Si desea acceder a esto a través de Internet, busque en el reenvío de puertos ¿Qué es el reenvío de puertos y cómo puede ayudarme? [MakeUseOf Explica] ¿Qué es el reenvío de puertos y cómo puede ayudarme? [MakeUseOf Explica] ¿Llora un poco por dentro cuando alguien le dice que hay un problema de reenvío de puertos y es por eso que su nueva aplicación no funcionará? Tu Xbox no te permitirá jugar juegos, tus descargas de torrent se rechazan ... Leer más .

Plantillas

Ahora que su servidor está todo configurado, es hora de escribir algunas plantillas. Utilizará JSON para enviar datos entre Python y Javascript, y las plantillas lo facilitan. Hemos escrito sobre lo que JSON es ¿Qué es JSON? Descripción de un laico ¿Qué es JSON? La visión general de un Layman Tanto si planea ser un desarrollador web como si no, es una buena idea al menos saber qué es JSON, por qué es importante y por qué se utiliza en toda la web. Lea más en el pasado, así que lea si no está seguro.

Tendrá que utilizar un lenguaje de plantillas. Jinja2 viene con Flask, por lo que no se necesita configuración adicional.

Un lenguaje de plantillas funciona en conjunto con un servidor web. Toma la salida de sus scripts de Python (el código de back-end), y facilita la salida al usuario utilizando HTML (el front-end). Es importante tener en cuenta que las plantillas deben no ser utilizado para la lógica! Mantener la lógica en Python y usar plantillas. solamente para mostrar los datos. Se vuelve muy desordenado si empiezas a tratar de complicarte con la plantilla..

Crea una carpeta dentro de tu directorio de proyectos llamada plantillas. El matraz reconoce los archivos dentro de esta carpeta como archivos de plantilla. No coloque ningún script de Python aquí, aquí es donde puede colocar sus archivos HTML.

Crear un archivo llamado index.html. Dentro de ella, coloque el siguiente código:

 nombre 

Esta es la forma de acceder a un dato llamado nombre, que se encontrará dentro de tus guiones. Vuelve a tu json_io.py. guión, y modificar el salida función. En lugar de volver Hola Mundo, ingrese este código:

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

Esto cargará el index.html archivo que creó anteriormente, y sustituya el nombre etiqueta de plantilla para la cadena Joe. Puede usar este método para cargar cualquier página dentro de su carpeta de plantillas y pasarles cualquier cantidad de datos.

El código

Ahora que sabe cómo funcionan las plantillas, aquí tiene el código HTML completo que necesita. Pega esto dentro de tu index.html expediente:

  Esto enviará datos utilizando AJAX a Python:

 Haz click en mi

Observe cómo esto no incluye CSS, o cualquier encabezado HTML. Estos son necesarios para las páginas web (este ejemplo funcionará sin ellos), así que investigue en W3Schools si le interesa.

No hay mucho que hacer en este archivo. Se configura una lista JSON de coches de rally. Hay un poco de texto y un botón. Cuando se presiona el botón, jQuery se usa para ENVIAR La lista de coches al servidor. Esto irá a la receptor punto final, que creará a continuación. Asegúrese de leer nuestra guía de jQuery si desea obtener más información sobre cómo funciona esto en este contexto..

Aquí está el código que necesitas para json_io.py:

#! flask / bin / python import sys desde flask import Flask, render_template, request, redirect, Response import random, json app = Flask (__ name__) @ app.route ('/') def output (): # service index template return render_template ('index.html', name = "Joe") @ app.route ('/ receiver', methods = ['POST']) def worker (): # read json + reply data = request.get_json () result = "para el elemento en los datos: # bucle sobre el resultado de cada fila + = str (elemento ['make']) + '\ n' devolver el resultado si __name__ == '__main__': # run! app.run ()

Este código define dos puntos finales. El predeterminado (/) sirve la página html anterior. Cuando se presiona el botón, un ENVIAR solicitud se hace a la /receptor punto final La segunda parte de la definición de ruta (métodos = ['POST']) define cómo se puede acceder a esta página. Como ENVIAR es la única forma especificada, esta ruta rechazará cualquier otra solicitud http (como OBTENER).

Esta /receptor el punto final simplemente se desplaza sobre cada fila JSON y agrega la marca del vehículo a una cadena, que luego se devuelve después del bucle. El JSON se almacena en el datos variable, y como el request.get_json () se utilizó, Python es consciente de que este es un objeto JSON. los ít variable dentro del en bucle Puede pensarse como una fila de datos. Se puede acceder a diferentes elementos de cada fila usando su nombre entre corchetes (elemento ['hacer']).

Abra las herramientas de desarrollo de su navegador (CMD > ALT > yo en Mac OS / Chrome), y navegue hasta red lengüeta. Presione el botón, y debería ver aparecer la respuesta del servidor:

Intenta modificar el JSON inicial y ver qué pasa. Vamos a modificar el Python para hacer alguna cosa Diferentes, dependiendo del JSON. Aquí está el nuevo código que necesitas para el en bucle:

 para el elemento en los datos: # bucle sobre cada fila make = str (elemento ['make']) if (make == 'Porsche'): resultado + = make + '- Eso es un buen fabricante \ n' else: result + = make + '- Eso es solo un fabricante promedio \ n' 

Esto utiliza una instrucción if simple para cambiar la salida, dependiendo de la entrada. Puede adaptarlo fácilmente para escribir en una base de datos o ejecutar un fragmento de código diferente. Esto es lo que parece ahora:

Ahora debe tener una comprensión sólida de cómo configurar un servidor Python y cómo puede responder a las solicitudes JSON.

¿Te gusta la codificación en JavaScript? Intente programar una animación de robot sensible a la voz Cómo escribir una animación de robot sensible a la voz en p5.js Cómo realizar una secuencia de comandos de una animación de robot sensible a la voz en p5.js ¿Quiere que sus hijos se interesen en la programación? Muéstrales esta guía para construir una cabeza de robot animada reactiva con sonido. Lee mas !

Explorar más sobre: ​​JavaScript, Python, Desarrollo Web.