Cómo obtener Python y JavaScript para comunicarse usando JSON

Anuncio

¿Alguna vez se preguntó cómo enviar datos entre dos lenguajes de programación? ¿Alguna vez intentó enviar un objeto o múltiples datos?

Hoy te 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. Ejecutaré en Mac, que ya tiene Python instalado. Debería poder seguir razonablemente bien usando Linux. Si está utilizando Windows, necesitará descargar e instalar Python, y quizás repasar tu habilidades de línea de comando Una guía para principiantes sobre la línea de comandos de WindowsLa línea de comando le permite comunicarse directamente con su computadora e indicarle que realice varias tareas. Lee mas .

Necesitará pipa, un administrador 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 puedes usar aquí. Tornado es una buena elección, como es Retorcido (He escrito sobre Twisted antes para un Cámara de red de bricolaje). Estaré usando Matraz para este proyecto.

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

pip install Flask

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

Es posible que desee considerar usar un Entorno virtual de Python Aprenda a usar el entorno virtual de PythonYa sea que sea un desarrollador experimentado de Python o que recién esté comenzando, aprender a configurar un entorno virtual es esencial para cualquier proyecto de Python. Lee mas Sin embargo, esto es completamente opcional.

Configuración de Python

Cree un nuevo archivo en su editor de texto favorito o en el Entorno de desarrollo integrado (IDE). Estoy usando Sublime Text 3 y PyCharm, pero usa lo que te resulte cómodo.

Ahora realice una configuración inicial de Flask:

desde el matraz de importación Frasco. aplicación = Frasco (__nombre__)

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

@ app.route ("/ salida") def output (): devuelve "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 () la 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 cualquier nombre adecuado. Dentro de este método hay un simple ¡Hola Mundo! cuerda. Finalmente, configure su script para que realmente se ejecute cuando se lo solicite:

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

Continúa y guarda este script como json_io.py En un lugar adecuado. Regrese a su Terminal y navegue a la carpeta de su proyecto. Ejecute el script:

python json_io.py

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

* Que 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 ejecuta su servidor, así como el puerto. Estos serán 127.0.0.1 y 5000. Puedes presionar CTRL > C para detener esto, pero no lo hagas todavía.

Ingrese la dirección en su navegador, y debería ver ¡Hola Mundo! aparecer en la pantalla. ¡Ahora ha configurado con éxito un servidor Python y ha escrito su primer script! Deberá reiniciar el servidor (detenga el script y luego vuelva a ejecutarlo) 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 (ejecute ifconfig en la línea de comando) y el puerto que ingresó anteriormente. Es posible que deba configurar su cortafuegos Si estás 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, consulte reenvío de puertos ¿Qué es el reenvío de puertos y cómo puede ayudarme? [MakeUseOf explica]¿Lloras un poco por dentro cuando alguien te dice que hay un problema de reenvío de puertos y es por eso que tu nueva aplicación brillante no funcionará? Tu Xbox no te permitirá jugar, tus descargas de torrents se rechazan ... Lee mas .

Plantillas

Ahora que su servidor está configurado, es hora de escribir algunas plantillas. Utilizará JSON para enviar datos entre Python y Javascript, y las plantillas lo facilitan. Hemos escrito sobre que es JSON ¿Qué es el JSON? Descripción general de un laicoYa sea que planee ser un desarrollador web o no, es una buena idea al menos saber qué es JSON, por qué es importante y por qué se usa en toda la web. Lee mas en el pasado, así que ve a leer si no estás seguro.

Deberá usar 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 Python (el código de fondo) y facilita la salida al usuario usando HTML (el front-end). Es importante tener en cuenta que las plantillas deberían no ser usado para la lógica! Mantenga la lógica en Python y use plantillas solamente para mostrar los datos. Se vuelve muy complicado si comienzas a tratar de complicarte con la plantilla.

Cree una carpeta dentro del directorio de su proyecto llamada plantillas. Flask 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.

Crea un archivo llamado index.html. Dentro de él, coloque el siguiente código:

{{ nombre }}

Esta es la forma de acceder a un dato llamado nombre, que se encontrará dentro de sus scripts. Vuelve a tu json_io.py. script y modificar el salida función. En lugar de regresar 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í está el código HTML completo que necesita. Pega esto dentro de tu index.html archivo:

Esto enviará datos usando AJAX a Python:

Haz click en mi

Observe cómo esto no incluye CSS ni ningún encabezado HTML. Estos son necesarios para las páginas web (este ejemplo funcionará sin ellas), por lo que debe consultarlos W3Schools si te importa

No hay demasiado 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 autos al servidor. Esto irá a la receptor punto final, que creará a continuación. Asegúrate de leer nuestro guía de jQuery si desea obtener más información sobre cómo funciona eso en este contexto.

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

#! flask / bin / python import sys from flask import Flask, render_template, request, redirect, Response. importación aleatoria, aplicación json = Frasco (__name__) @ app.route ('/') def output (): # servir plantilla de índice return render_template ('index.html', nombre = 'Joe') @ app.route ('/ receptor', métodos = ['POST']) def worker (): # read json + reply data = request.get_json () result = '' para el elemento en los datos: # recorre cada resultado de fila + = str (item ['make']) + '\ n' return result if __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 /receiver 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 negará cualquier otra solicitud http (como OBTENER).

Esta /receiver el punto final simplemente recorre cada fila JSON y agrega la marca del automóvil a una cadena, que luego se devuelve después del ciclo. 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 articulo variable dentro del en bucle puede considerarse como una fila de datos. Se puede acceder a diferentes elementos de cada fila utilizando su nombre entre corchetes (elemento ["hacer"]).

Abra las herramientas de desarrollador 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:

Intente modificar el JSON inicial y vea qué sucede. Vamos a modificar el Python para hacer alguna cosa diferente, dependiendo del JSON. Aquí está el nuevo código que necesita para en bucle:

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

Esto usa una instrucción if simple para cambiar la salida, dependiendo de la entrada. Puede adaptar esto fácilmente para escribir en una base de datos o ejecutar un código diferente. Así es como se ve ahora:

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

¿Te gusta la codificación en JavaScript? Tratar escribir una animación de robot sensible a la voz Cómo escribir una animación de robot sensible a la voz en p5.js¿Quiere que sus hijos se interesen en la programación? Muéstreles esta guía para construir una cabeza de robot animada reactiva al sonido. Lee mas ! También es posible que desee mejorar sus habilidades como desarrollador dominando Funciones de flecha de JavaScript Las funciones de flecha de JavaScript pueden convertirlo en un mejor desarrollador¿Quieres ser mejor en el desarrollo web? Las funciones de flecha, agregadas a JavaScript ES6, le brindan dos formas de crear funciones para aplicaciones web. Lee mas y métodos de matriz 5 métodos de matriz de JavaScript que debe dominar hoy¿Desea comprender las matrices de JavaScript pero no puede familiarizarse con ellas? Consulte nuestros ejemplos de matriz de JavaScript para obtener orientación. Lee mas y explorando otros lenguajes de programación funcionales 5 lenguajes de programación funcional que debes saber¿Quieres saber más sobre programación? Vale la pena aprender sobre programación funcional y qué lenguajes de programación lo admiten. Lee mas .