Django es un framework de Python para el desarrollo web que funciona en el motor de plantillas jinja2. Cuando los datos se procesan junto con la plantilla después de pasar por views.py, esos datos se vuelven estáticos en el archivo html junto con el cual se procesaron. Como django es un marco de back-end, por lo tanto, para usar el poder de python para usar esos datos, se deben generar requests dinámicas. Estas requests pueden ser del tipo GET, POST, AJAX, etc. Pero sin hacer ninguna llamada al backend, la única forma de usar esos datos de forma dinámica es pasarlos a JavaScript. A menudo, pasar algunos valores a JavaScript funciona. Pero a veces es necesario pasar todo el diccionario de datos. Esto se puede hacer usando etiquetas de plantilla JSON y django.
Para obtener más información sobre Django Framework en Python, visite: Django Tutorial .
En el archivo ‘views.py’ –
from django.shortcuts import render
from json import dumps
def send_dictionary(request):
# create data dictionary
dataDictionary = {
'hello': 'World',
'geeks': 'forgeeks',
'ABC': 123,
456: 'abc',
14000605: 1,
'list': ['geeks', 4, 'geeks'],
'dictionary': {'you': 'can', 'send': 'anything', 3: 1}
}
# dump data
dataJSON = dumps(dataDictionary)
return render(request, 'main / landing.html', {'data': dataJSON})
En el archivo ‘landing.html’ –
<!DOCTYPE html>
<body>
<div style="width: 40%;
border: 1px solid black;
background-color: lightcyan;
font-family: Helvetica, sans-serif;">
<div style="margin: 5%;">
<h1>
<u>Dictionary Data</u>
</h1>
<h2>
<u>All Data</u>
</h2>
<h4 id='alldata'></h4><br>
<h2>
<u>Neat Data</u>
</h2>
<h4 id='neatdata'></h4>
</div>
</div>
</body>
</html>
<script>
var data = JSON.parse("{{data|escapejs}}");
var dataNode = document.getElementById('alldata');
dataNode.innerHTML+="{{data|escapejs}}";
dataNode = document.getElementById('neatdata');
for(var x in data){
dataNode.innerHTML+=x+' : '+data[x]+'<br><br>';
}
</script>
Producción:
Ahora, el valor de «diccionario» no es el mismo que ingresamos en python. Esto se debe a que JavaScript considera los diccionarios como objetos separados, por lo que para ver los datos de esos objetos, debemos especificarlos por separado en JavaScript.
Caso de uso –
Vamos a crear un sitio web de buscador opuesto usando Django. Introduciremos la relación opuesta entre palabras en Python y la enviaremos a JavaScript para determinar el resultado en función de la entrada del usuario.
En el archivo ‘views.py’ –
from django.shortcuts import render
from json import dumps
def opposites(request):
# create data dictionary
data = [
["Laugh", "Cry"],
["Even", "Odd"],
["Hot", "Cold"],
["Light", "Dark"],
["Opposite", "Same"],
["Far", "Near"],
["Give", "Take"],
["Night", "Day"],
["Import", "Export"],
["Hard", "Easy"],
["Never", "Always"],
["Late", "Early"],
["Less", "More"],
["Male", "Female"],
["Happiness", "Sadness"],
["Fast", "Slow"],
["Old", "Young"],
["Boy", "Girl"],
["Up", "Down"],
["Left", "Right"],
["Rich", "Poor"],
["Love", "Hate"],
["Inside", "Outside"],
["Bad", "Good"],
["Short", "Tall"],
]
data = dumps(data)
return render(request, "main/opposites.html", {"data": data})
En el archivo ‘opposites.html’ –
<!DOCTYPE html>
<html>
<body>
<div>
Opposite of ?
<input type="text" id="input" placeholder="Input">
<input type="submit" id='opp' value="Submit" onclick="opposite()">
<br><br>Result : <h id='result'></h>
</div>
</body>
</html>
<script>
function opposite(){
var data = JSON.parse("{{data|escapejs}}");
var input = document.getElementById("input").value;
var result = document.getElementById("result")
var flag = 1;
for(var x in data){
if(input.toLowerCase()==data[x][0].toLowerCase()){
result.innerHTML = data[x][1];
flag=0;
}
else if(input.toLowerCase()==data[x][1].toLowerCase()){
result.innerHTML = data[x][0];
flag=0;
}
}
if(flag){
result.innerHTML = "No results found"
}
}
</script>
Producción:
Publicación traducida automáticamente
Artículo escrito por deekshant149 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA