Búsqueda de sitios web

Cómo hacer que Python y JavaScript se comuniquen usando JSON


Hoy le mostraremos cómo usar JSON para enviar datos desde JavaScript a Python.

¿Se pregunta cómo puede enviar datos desde JavaScript a Python? Bueno, eso es fácil con una interfaz de programación de aplicaciones (API).

Los lenguajes de programación se comunican e intercambian datos mediante API. Normalmente, en dicha comunicación, una tecnología de backend (proveedor de API) responde con datos después de recibir una solicitud de un script de front-end. Sin embargo, existen muchos tipos de solicitudes; En este artículo, aprenderá cómo utilizar la solicitud POST para enviar datos en formato JSON desde JavaScript al servidor mediante una API de Python.

Instalaciones de servidores Python y Flask

Si está en Windows y aún no tiene Python instalado, descárguelo del sitio web python.org. Los usuarios de Mac no necesitan descargar Python ya que el sistema operativo viene con él de forma predeterminada. También podrás seguir razonablemente bien usando Linux.

Configuración e instalación del servidor

Necesitará un servidor para crear una API REST de Python. Hay muchos marcos web Python para esto. Flask, Django, FastAPI, Tornado y muchos otros resultan útiles para escribir API REST en Python.

No obstante, utilizará Flask para este tutorial, ya que es fácil de entender y compatible con API.

Primero, cree un entorno virtual de Python. Abra su terminal en la carpeta raíz de su proyecto. Luego, instale Flask y flask-cors usando pip:

pip install Flask, flask-cors

El paquete flask-cors es el módulo CORS integrado de Flask para omitir la política de recursos de origen cruzado al realizar solicitudes desde el punto final de API. Verá cómo configurar esto con Flask a medida que avance.

Eso es todo por la parte de instalación.

Estructura esquelética del matraz

A continuación, cree un nuevo archivo en la carpeta raíz de su proyecto. Asegúrese de que tenga la extensión de archivo .py . Por ejemplo, puede ser app.py.

Abra ese archivo en su editor de código favorito y configure su aplicación Flask de la siguiente manera:

from flask import Flask, request, jsonify
from flask_cors import CORS
<strong>#Set up Flask</strong>:
app = Flask(__name__)
<strong>#Set up Flask to bypass CORS at the front end:</strong>
cors = CORS(app)
<strong>#Run the app</strong>:
if __name__ == "__main__":
     app.run()

El código anterior importa los módulos necesarios y configura su aplicación. El código adicional al final (app.run()) configura la aplicación para que se ejecute en un puerto predeterminado, generalmente el puerto 5000.

Crear un punto final de API POST

En este tutorial, enviará datos JSON que contienen diferentes marcas de automóviles y sus modelos desde JavaScript al servidor mediante un punto final de Flask. En tu JavaScript, asignarás los datos a una variable llamada autos. Aunque puedes darle el nombre que quieras.

Pero primero, abra el archivo app.py , configure un punto final de API POST y llámelo receptor. Tenga en cuenta que puede utilizar cualquier convención de nomenclatura que desee.

Así es como se ve tu archivo Python ahora:

from flask import Flask, request, jsonify
from flask_cors import CORS
<strong>#Set up Flask</strong>:
app = Flask(__name__)
<strong>#Set up Flask to bypass CORS</strong>:
cors = CORS(app)
<strong>#Create the receiver API POST endpoint</strong>:
@app.route("/receiver", methods=["POST"])
def postME():
   data = request.get_json()
   data = jsonify(data)
   return data
if __name__ == "__main__": 
   app.run(debug=True)

Publicar datos desde JavaScript a Python Flask API

Dado que el punto final de POST API está listo, cree un archivo JavaScript y HTML en la carpeta raíz de su proyecto (donde está su aplicación flask). Asígnales el nombre que quieras (data.js y index.html en este caso).

Pero primero, así es como se ve index.html :

<!DOCTYPE html>
<html>
    <head>
        <title>
            Python sending
        </title>
    </head>
    <body>
        <button id="theButton">Post to Python</button>
        <h3 id = "info"></h3>
        <strong><!-- Link to the JavaScript file here: --></strong>
        <script src="data.js"></script>
    </body>
</html>

En particular, el archivo HTML anterior describe un botón que escucha un evento de clic para mostrar los datos publicados, ya sea en la consola o en el DOM.

La etiqueta h3 sirve como contenedor para los datos entrantes si luego decide mostrarlos en el DOM. Tenga en cuenta que esto no es una convención: puede mostrar los datos entrantes en cualquier contenedor HTML que desee.

Después de configurar el archivo HTML, utilice la API Fetch integrada de JavaScript para publicar los datos (coches) en el servidor.

Aquí está el JavaScript:

<strong>// Get the button and container elements from HTML</strong>:
const button = document.getElementById("theButton")
const data = document.getElementById("info")
<strong>// Create an array of cars to send to the server</strong>:
const cars = [
 { "make":"Porsche", "model":"911S" },
 { "make":"Mercedes-Benz", "model":"220SE" },
 { "make":"Jaguar","model": "Mark VII" }
];
<strong>// Create an event listener on the button element</strong>:
button.onclick= function(){
    <strong>// Get the reciever endpoint from Python using fetch</strong>:
    fetch("http://127.0.0.1:5000/receiver", 
        {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/json'
            },
        <strong>// Strigify the payload into JSON</strong>:
        body:JSON.stringify(cars)}).then(res=>{
                if(res.ok){
                    return res.json()
                }else{
                    alert("something is wrong")
                }
            }).then(jsonResponse=>{
                
                // Log the response data in the console
                console.log(jsonResponse)
            } 
            ).catch((err) => console.error(err));
            
           }

El script anterior contiene una matriz JSON de coches de rally. La función button.click es un detector de eventos de clic adjunto al botón en el archivo HTML que creó anteriormente.

Por lo tanto, cuando un usuario hace clic en el botón, fetch utiliza la solicitud POST para enviar la matriz de automóviles al servidor. El punto final receptor en Flask recibe esta solicitud y envía datos de respuesta a JavaScript (front-end), que se muestra en la consola del navegador.

Ahora, inicie el archivo HTML en su navegador y abra la consola de desarrollador (en Windows: Ctrl + Shift + I, en Mac: CMD + ALT + I). Vaya a la sección Consola , y verá la respuesta JSON devuelta.

Para realizar un seguimiento de la respuesta JSON en tiempo real, haga clic en Red en la consola del desarrollador (en Chrome). Debajo de la línea de tiempo de la red, seleccione receptor o el nombre de su punto final de Flask. Luego haga clic en Respuesta en la parte superior de ese submenú.

La respuesta debería verse así:

Además, puede hacer clic en Encabezados para ver el estado de respuesta de la solicitud. Debería ser 200, lo que significa que su API ha devuelto una respuesta válida.

A continuación, puedes escribir los datos en el DOM con lógica adicional en tu JavaScript:

<strong>// Get the button and container from HTML</strong>:
const button = document.getElementById("theButton")
const data = document.getElementById("info")
<strong>// Create an event listener on the button element</strong>:
button.onclick= function(){
    
    // Get the receiver endpoint from Python using fetch:
    fetch("http://127.0.0.1:5000/receiver", 
        {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/json'
            },
        <strong>// Strigify the payload into JSON</strong>:
        body:JSON.stringify(cars)}).then(res=>{
                if(res.ok){
                    return res.json()
                }else{
                    alert("something is wrong")
                }
            }).then(jsonResponse=>{
                
                <strong>// Iterate through the data with Map and write your rendering logic</strong>:
                jsonResponse.map(Main=> 
       Main.make==="Porsche"? data.innerHTML +="<p>"+ Main.make+" "+" is a good product":
      data.innerHTML +="<p>"+ Main.make+" "+"is an average product" ) 
} 
).catch((err) => console.error(err)); } 

Usando la función map, el script anterior recorre los datos de respuesta. El atributo Main.make obtiene el nombre de cada automóvil a partir de los datos de respuesta devueltos por el servidor. La lógica ternaria dentro de la función map luego indica a JavaScript qué mostrar con cada marca.

Por lo tanto, cuando haces clic en el botón Publicar, esto es lo que obtienes:

¡Ahí tienes! Ahora sabe cómo configurar un punto final de Flask y publicar datos en el servidor de forma asíncrona mediante JavaScript.

Siga explorando las API REST en el desarrollo web

Las API ofrecen la mejor manera de separar el backend del frontend. Una de sus ventajas es que le permite desacoplar fácilmente el lado del cliente del lado del servidor. Has visto cómo conectar JavaScript a Python y enviar datos al servidor, pero eso es sólo un rasguño de la superficie.

Puede profundizar más conectando la API REST de Flask a una base de datos como MongoDB, de modo que esto le permita tener un repositorio para almacenar los datos publicados. Incluso podrías convertir esto en un proyecto completo enviando los datos a la base de datos mediante un campo de formulario.