Vix Blog
No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
NEWSLETTER
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
No Result
View All Result
Vix Blog
No Result
View All Result
Home Entretenimento

Porquê obter Python e JavaScript para se remeter usando JSON

Carolina por Carolina
25 de março de 2022
Tempo de leitura:9min de leitura
0
Porquê obter Python e JavaScript para se remeter usando JSON

Você está se perguntando uma vez que você pode enviar dados de JavaScript para Python? Muito, isso é fácil com uma interface de programação de aplicativos (API).

As linguagens de programação se comunicam e trocam dados usando APIs. Normalmente, em tal notícia, uma tecnologia de back-end (provedor de API) responde com dados posteriormente receber uma solicitação de um script de front-end. No entanto, existem muitos tipos de solicitação; neste item, você aprenderá a usar a solicitação POST para enviar dados no formato JSON do JavaScript para o servidor usando uma API Python.

Instalações de Python e Flask Server

Se você estiver no Windows e ainda não tiver o Python instalado, baixe-o do site python.org. Os usuários de Mac não precisam decrescer o Python, pois o sistema operacional vem com ele por padrão. Você poderá escoltar razoavelmente muito usando o Linux também.

Feição e instalação do servidor

Você precisará de um servidor para fabricar uma API REST Python. Existem muitos frameworks web Python para isso. Flask, Django, FastAPI, Tornado e muitos outros são úteis para redigir APIs REST em Python.

No entanto, você usará o Flask para nascente tutorial, pois é fácil de entender e conciliável com a API.

Primeiro, crie um envolvente virtual Python. Abra seu terminal na pasta raiz do seu projeto. Em seguida, instale Frasco e frascos-cortes usando pip:

pip install Flask, flask-cors

O frascos-cortes O pacote é o módulo CORS integrado do Flask para ignorar a política de recursos de origem cruzada durante a solicitação do endpoint da API. Você verá uma vez que configurar isso com o Flask à medida que avança.

MAKEUSEO VÍDEO DO DIA

Isso é tudo para a secção de instalação.

Estrutura Esquelética do Frasco

Em seguida, crie um novo registro na pasta raiz do projeto. Certifique-se de que possui .py extensão de registro. Por exemplo, pode ser app.py.

Abra esse registro em seu editor de código predilecto e configure seu aplicativo Flask da seguinte forma:

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

O código supra importa os módulos necessários e configura seu aplicativo. O código extra no final da rabo (app.run()) define o aplicativo para ser executado em uma porta padrão, geralmente a porta 5000.

Gerar um endpoint de API POST

Neste tutorial, você enviará dados JSON contendo diferentes marcas de carros e seus modelos do JavaScript para o servidor usando um endpoint Flask. Em seu JavaScript, você atribuirá os dados a uma variável chamada carros. Você pode dar o nome que quiser, no entanto.

Mas primeiro, abra o app.py registro, configure um endpoint de API POST e chame-o receptor. Tenha em mente que você pode usar qualquer convenção de nomenclatura que desejar.

Veja uma vez que seu registro Python está agora:

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


Postar dados de JavaScript para Python Flask API

Porquê o endpoint da API POST está pronto, crie um registro JavaScript e HTML na pasta raiz do projeto (onde está o aplicativo do frasco). Dê a eles o nome que quiser (data.js e índice.html nesse caso).

Mas primeiro, veja uma vez que índice.html visual:

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

Notavelmente, o registro HTML supra descreve um botão que escuta um evento de clique para exibir os dados postados, seja no console ou no DOM.

O h3 serve uma vez que um contêiner para os dados de ingresso se você sentenciar exibi-los posteriormente no DOM. Observe que isso não é uma convenção – você pode exibir os dados recebidos em qualquer contêiner HTML que desejar.

Relacionado:Porquê testar uma API usando Python e JavaScript

Depois de configurar o registro HTML, use a API Fetch integrada do JavaScript para postar os dados (carros) ao servidor.

Cá está o JavaScript:

// Get the button and container elements from HTML:
const button = document.getElementById("theButton")
const data = document.getElementById("info")
// Create an array of cars to send to the server:
const cars = [
{ "make":"Porsche", "model":"911S" },
{ "make":"Mercedes-Benz", "model":"220SE" },
{ "make":"Jaguar","model": "Mark VII" }
];
// Create an event listener on the button element:
button.onclick= function(){
// Get the reciever endpoint from Python using fetch:
fetch("http://127.0.0.1:5000/receiver",
{
method: 'POST',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
// Strigify the payload into JSON:
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));

}


O script supra contém uma matriz JSON de carros de rally. O botão.clique função é um ouvinte de evento de clique anexado ao botão no registro HTML que você criou anteriormente.

Assim, quando um usuário clica no botão, buscar usa o PUBLICAR solicitação para enviar a matriz de carros para o servidor. O receptor endpoint no Flask recebe essa solicitação e envia dados de resposta para JavaScript (front end), que é exibido no console do navegador.

Agora, inicie o registro HTML no seu navegador e abra o console do desenvolvedor (no Windows: Ctrl + Mudança + euno Mac: CMD + ALT + eu). Vá para a Consola seção, e você verá a resposta JSON retornada.

Relacionado:Porquê usar o Chrome DevTools para solucionar problemas do site

Para rastrear a resposta JSON em tempo real, clique em Rede no console do desenvolvedor (no Chrome). Aquém da risca do tempo da rede, selecione receptor ou o nome do seu endpoint Flask. Logo clique Resposta na secção superior desse submenu.

A resposta deve ser um tanto assim:


Resposta da API no console de rede do navegador
Tomada de tela: nenhuma atribuição necessária

Aliás, você pode clicar Cabeçalhos para visualizar o status de resposta da solicitação. Deve ser 200, o que significa que sua API retornou uma resposta válida.

Em seguida, agora você pode gravar os dados no DOM com lógica suplementar em seu JavaScript:

// Get the button and container from HTML:
const button = document.getElementById("theButton")
const data = document.getElementById("info")
// Create an event listener on the button element:
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'
},
// Strigify the payload into JSON:
body:JSON.stringify(cars)}).then(res=>{
if(res.ok){
return res.json()
}else{
alert("something is wrong")
}
}).then(jsonResponse=>{

// Iterate through the data with Map and write your rendering logic:
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 o planta função, o script supra faz um loop pelos dados de resposta. O Main.make O atributo obtém o nome de cada coche dos dados de resposta retornados do servidor. A lógica ternária dentro do planta A função portanto instrui o JavaScript sobre o que exibir com cada marca.

Portanto, quando você clica no botão de postagem, cá está o que você obtém:


Dados de ressonância da API renderizados no DOM
Tomada de tela: nenhuma atribuição necessária

Ai está! Agora você sabe uma vez que configurar um endpoint Flask e postar dados no servidor de forma assíncrona usando JavaScript.

RELATED POSTS

Uma vez que parar de compartilhar recibos de leitura no iMessage

Os 4 melhores aplicativos para iPhone para fãs da Terreno-média

As 5 melhores ferramentas para um trabalho produtivo

Continue explorando APIs REST no desenvolvimento da Web

As APIs oferecem a melhor maneira de separar seu back-end do front. Uma de suas vantagens é que permite desacoplar facilmente o lado do cliente do lado do servidor. Você viu uma vez que conectar JavaScript ao Python e enviar dados para o servidor, mas isso é exclusivamente um rascunho da superfície.

Você pode ir mais fundo conectando a API REST do Flask a um banco de dados uma vez que o MongoDB, portanto isso permite que você tenha um repositório para armazenar os dados postados. Você pode até transformar isso em um projeto completo enviando os dados para o banco de dados usando um campo de formulário.


Duas mulheres sentadas de frente uma para a outra com o logotipo do Python aparecendo na tela frontal do computador
Porquê aprender Python de perdão

Pronto para aprender Python, uma das linguagens de programação mais procuradas ultimamente? Veja uma vez que você pode iniciar.

Leia a seguir


Sobre o responsável

Idowu Omisola
(129 Artigos Publicados)

Idowu é enamorado por qualquer tecnologia inteligente e produtividade. Em seu tempo livre, ele brinca com a codificação e muda para o tabuleiro de xadrez quando está entediado, mas também adora fugir da rotina de vez em quando. Sua paixão por mostrar às pessoas o caminho da tecnologia moderna o motiva a redigir mais.

Mais de Idowu Omisola

Assine a nossa newsletter

Junte-se à nossa newsletter para dicas de tecnologia, análises, e-books gratuitos e ofertas exclusivas!

Clique cá para assinar

Novidades no seu e-mail!

Não enviamos spam! Leia mais em nossa Política de privacidade

Verifique sua caixa de entrada ou a pasta de spam para confirmar sua assinatura.

ShareTweetPin
Carolina

Carolina

Relacionado Posts

Uma vez que parar de compartilhar recibos de leitura no iMessage
Entretenimento

Uma vez que parar de compartilhar recibos de leitura no iMessage

24 de março de 2022
Os 4 melhores aplicativos para iPhone para fãs da Terreno-média
Entretenimento

Os 4 melhores aplicativos para iPhone para fãs da Terreno-média

24 de março de 2022
As 5 melhores ferramentas para um trabalho produtivo
Entretenimento

As 5 melhores ferramentas para um trabalho produtivo

24 de março de 2022
Uma vez que emendar o driver de vídeo parou de responder no Windows 11/10
Entretenimento

Uma vez que emendar o driver de vídeo parou de responder no Windows 11/10

24 de março de 2022
Uma selecção de destaque para Linux
Entretenimento

Uma opção de destaque para Linux

24 de março de 2022
Uma selecção de destaque para Linux
Entretenimento

Uma selecção de destaque para Linux

24 de março de 2022
Next Post

How to Turn Off 2-Step Verification on Your Google Account on Android

How Can a Smartphone Always Make Emergency Calls?

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

No Result
View All Result

Últimas Notícias

7 maneiras de emendar a instrumento Windows Miracast quando ela funciona mal

24 de março de 2022
Porquê enganar aplicativos para pensar que seu Android não está enraizado

Porquê enganar aplicativos para pensar que seu Android não está enraizado

24 de março de 2022
Uma vez que parar de compartilhar recibos de leitura no iMessage

Uma vez que parar de compartilhar recibos de leitura no iMessage

24 de março de 2022
Porquê usar guias no Vivaldi para organizar sua navegação

Uma vez que usar gestos do mouse no Vivaldi para velejar mais rápido

24 de março de 2022
Uma vez que trabalhar em mansão sem experiência

Uma vez que trabalhar em mansão sem experiência

24 de março de 2022

Novidades no seu e-mail!

Não enviamos spam! Leia mais em nossa Política de privacidade

Verifique sua caixa de entrada ou a pasta de spam para confirmar sua assinatura.

Categorias

  • Entretenimento
  • Mundo
  • Segurança
Vix Blog

Somos entusiastas da tecnologia com a missão de ensinar ao mundo como usar e compreender a tecnologia em suas vidas.
SAIBA MAIS »

Entre em contato conosco enviando um e-mail para [email protected]

Posts recentes

  • 7 maneiras de emendar a instrumento Windows Miracast quando ela funciona mal
  • Porquê enganar aplicativos para pensar que seu Android não está enraizado
  • Uma vez que parar de compartilhar recibos de leitura no iMessage

Categorias

  • Entretenimento
  • Mundo
  • Segurança

Links Importantes

  • Quem Somos
  • Blog
  • Fale Conosco
  • Política de Privacidade
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.

No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.