venerdì, Marzo 29, 2024

Come passare le variabili JavaScript a Python in Flask

In questo tutorial, esamineremo l’utilizzo del framework Flask per sfruttare le variabili JavaScript in Python. In questa sezione parleremo dei numerosi approcci e strategie utilizzati per combinare i due linguaggi, passaggio essenziale per molte candidature online. Verrà trattato tutto, dai fondamenti ad argomenti più complessi, come come gestire enormi set di dati. Esamineremo anche i modi migliori per organizzare il codice Python per un’efficacia ottimale. Avrai una conoscenza approfondita di come combinare Python e JavaScript in Flask entro la fine di questa lezione. Sarai in grado di risolvere problemi complicati con facilità e velocità una volta che avrai queste informazioni. allora andiamo!

Due dei linguaggi di programmazione più utilizzati al mondo sono Python e JavaScript. Lavorano spesso insieme in progetti di sviluppo web poiché ognuno di loro ha punti di forza in aree particolari. Gli sviluppatori possono produrre applicazioni web sofisticate e potenti integrando i due.

Una libreria Python per la creazione di applicazioni Web è il framework Flask. È un framework semplice che semplifica la creazione di app Web dinamiche per i programmatori. Aiuta i programmatori a creare applicazioni rapidamente e con poca codifica.

Una fase cruciale per molte applicazioni web è l’integrazione di Python e JavaScript in Flask. Le strategie e gli approcci appropriati per realizzare l’integrazione devono essere attentamente pianificati. Gli sviluppatori che hanno familiarità con il framework Flask e come utilizzare le variabili JavaScript in Python possono creare app robuste che sono semplici da mantenere ed espandere.

Imparerai i fondamenti dell’utilizzo delle variabili JavaScript in Python con il framework Flask in questa lezione. Esamineremo argomenti avanzati, gestendo enormi set di dati e strutturando i programmi Python per un’efficienza ottimale. Avrai una conoscenza approfondita di come combinare Python e JavaScript in Flask entro la fine di questa lezione. Sarai in grado di risolvere problemi complicati con facilità e velocità una volta che avrai queste informazioni.

Concetti:

Prima di iniziare, esaminiamo brevemente alcuni dei concetti coinvolti:

  1. Borraccia – Un framework Web Python che consente di creare applicazioni Web.
  2. javascript – Un linguaggio di programmazione che viene eseguito nel browser e può manipolare le pagine web.
  3. AIAX – Una tecnica per creare applicazioni Web asincrone in grado di comunicare con i server senza aggiornare la pagina.
  4. JSON – Un formato di dati comunemente utilizzato per lo scambio di dati tra applicazioni web.

Configurazione dell’ambiente:

Devi avere Python e Flask installati sul tuo computer per poter utilizzare Flask e fornire variabili JavaScript a Python. I passaggi per preparare l’ambiente sono i seguenti:

  1. Installa Flask: dopo aver installato Python, puoi installare Flask digitando il seguente comando da una riga di comando o da un terminale:
pip install flask

Questo comando installa Flask e tutte le sue dipendenze.

2. Installare eventuali librerie aggiuntive necessarie: a seconda del caso d’uso, potrebbe essere necessario eseguire questa operazione per elaborare i dati, gestire le richieste o operare con particolari formati di file. Ad esempio, puoi utilizzare il seguente comando per installare la libreria panda se stai lavorando con file CSV:

pip install pandas

3. Organizza il tuo progetto: per il tuo progetto, crea una nuova directory e aggiungi un nuovo file Python. Ecco un’illustrazione di come potrebbe apparire la struttura del tuo progetto:

myproject/
├── app.py
├── static/
│   ├── script.js
└── templates/
   └── index.html

4. Avvio del server di sviluppo Flask Eseguire il comando seguente nel terminale o nel prompt dei comandi mentre ci si trova nella directory principale del progetto:

JavaScript

export FLASK_APP=app.py

export FLASK_ENV=development

flask run

Questo comando avvia il server di sviluppo Flask, a cui puoi accedere visitando nel tuo browser web. Se tutto è impostato correttamente, dovresti vedere a “Ciao mondo!” Messaggio.

Passaggi per passare le variabili JavaScript a Python in Flask:

  1. Crea un percorso Flask che riceverà la variabile JavaScript.
  2. Crea una funzione JavaScript che invierà la variabile al percorso Flask utilizzando una richiesta AJAX.
  3. Nel percorso Flask, recupera la variabile utilizzando l’oggetto richiesta.
  4. Elabora la variabile nel codice Python secondo necessità.
  5. Restituisce il risultato alla funzione JavaScript come risposta alla richiesta AJAX.

Ecco un esempio di implementazione:

Pitone

from flask import Flask,render_template, request

 

app = Flask(__name__,template_folder=”templates”)

 

@app.route(“/”)

def hello():

return render_template(‘index.html’)

 

@app.route(‘/process’, methods=(‘POST’))

def process():

data = request.get_json()

 

result = data(‘value’) * 2

return jsonify(result=result)

 

if __name__ == ‘__main__’:

app.run(debug=True)

HTML

<!DOCTYPE html>

<html>

<head>

<title>JavaScript to Python Example</title>

</head>

<body>

<input type=”text” id=”input”>

<button onclick=”sendData()”>Send Data</button>

<div id=”output”></div>

<script>

function sendData() {

var value = document.getElementById(‘input’).value;

$.ajax({

url: ‘/process’,

type: ‘POST’,

contentType: ‘application/json’,

data: JSON.stringify({ ‘value’: value }),

success: function(response) {

document.getElementById(‘output’).innerHTML = response.result;

},

error: function(error) {

console.log(error);

}

});

}

</script>

</body>

</html>

Qui abbiamo un semplice modulo HTML con un pulsante e un campo di input. La funzione javascript `sendData()` viene richiamato quando si preme il pulsante, recupera il valore dal campo di input e lo trasmette tramite una richiesta AJAX alla rotta Flask `/processo` in Boccetta.

`request.get_json()` viene utilizzato per recuperare i dati nella rotta Flask e il codice Python viene quindi utilizzato per elaborarli. Basta moltiplicare il valore per 2 in questo caso. Un oggetto JSON che rappresenta il risultato viene quindi restituito alla funzione JavaScript e mostrato nel div di output.

Produzione:

Doppia corda

Esempi:

Ecco alcuni altri esempi di passaggio di variabili JavaScript a Python in Flask:

Esempio 1:

Passaggio di una stringa

Pitone

from flask import Flask,render_template, request

 

app = Flask(__name__,template_folder=”templates”)

 

@app.route(“/”)

def hello():

return render_template(‘index.html’)

 

@app.route(‘/process’, methods=(‘POST’))

def process():

data = request.form.get(‘data’)

 

result = data.upper()

return result

 

if __name__ == ‘__main__’:

app.run(debug=True)

HTML

<!DOCTYPE html>

<html>

<head>

<title>JavaScript to Python Example</title>

</head>

<body>

<input type=”text” id=”input”>

<button onclick=”sendData()”>Send Data</button>

<div id=”output”></div>

<script>

function sendData() {

var value = document.getElementById(‘input’).value;

$.ajax({

url: ‘/process’,

type: ‘POST’,

data: { ‘data’: value },

success: function(response) {

document.getElementById(‘output’).innerHTML = response;

},

error: function(error) {

console.log(error);

}

});

}

</script>

</body>

</html>

In questo esempio, stiamo passando una stringa dalla funzione JavaScript alla rotta Flask. La stringa viene convertita in maiuscolo nel codice Python e restituita alla funzione JavaScript per la visualizzazione.

Produzione:

Output dell’app Web (passaggio di una stringa)

Esempio 2:

Passaggio di un numero

Pitone

from flask import Flask,render_template, request

 

app = Flask(__name__,template_folder=”templates”)

 

@app.route(“/”)

def hello():

return render_template(‘index.html’)

 

@app.route(‘/process’, methods=(‘POST’))

def process():

data = request.form.get(‘data’)

 

result = int(data) * 2

return str(result)

 

if __name__ == ‘__main__’:

app.run(debug=True)

HTML

<!DOCTYPE html>

<html>

<head>

<title>JavaScript to Python Example</title>

</head>

<body>

<input type=”number” id=”input”>

<button onclick=”sendData()”>Send Data</button>

<div id=”output”></div>

<script>

function sendData() {

var value = document.getElementById(‘input’).value;

$.ajax({

url: ‘/process’,

type: ‘POST’,

data: { ‘data’: value },

success: function(response) {

document.getElementById(‘output’).innerHTML = response;

},

error: function(error) {

console.log(error);

}

});

}

</script>

</body>

</html>

In questo esempio, stiamo passando un numero dalla funzione JavaScript al percorso Flask. Il numero viene moltiplicato per 2 nel codice Python e restituito alla funzione JavaScript per la visualizzazione.

Produzione:

Output dell’app Web (passaggio di un numero)

Esempio 3:

Passaggio di un array

JavaScript

const data = (1, 2, 3, 4, 5);

 

fetch(‘/process-data’, {

method: ‘POST’,

headers: {

‘Content-Type’: ‘application/json’

},

body: JSON.stringify({data: data})

})

.then(response => response.text())

.then(result => {

console.log(result);

})

.catch(error => {

console.error(‘Error:’, error);

});

Pitone

from flask import Flask,render_template, request, jsonify

 

app = Flask(__name__,template_folder=”templates”)

 

@app.route(“/”)

def hello():

return render_template(‘index.html’)

 

@app.route(‘/process-data’, methods=(‘POST’))

def process_data():

data = request.json(‘data’)

result = sum(data)

return jsonify({‘result’: result})

 

if __name__ == ‘__main__’:

app.run(debug=True)

In questa illustrazione, abbiamo utilizzato JavaScript per costruire un array di numeri interi utilizzando l’API Fetch per trasferirlo in Python. Abbiamo avuto accesso all’array nel codice Python usando `request.json(‘dati’)` e poi calcolò la somma dei numeri. `jsonify()` è stato utilizzato per restituire il risultato come oggetto JSON.

Tieni presente che la chiamata all’API Fetch ha utilizzato l’estensione `applicazione/json` tipo di contenuto e l’accesso Python ai dati utilizzava l’estensione `richiesta.json` tipo di contenuto. Questo perché JSON è il formato in cui inviamo e riceviamo i dati.

Questa funzione semplifica il trasferimento di array di dati tra Python e JavaScript in Flask.

Produzione:

Passaggio dei dati dell’array

 

ARTICOLI COLLEGATI:

ULTIMI ARTICOLI: