Pase el parámetro con Python Flask en Javascript externo
(2)
Utilizo Python Flask para mi sitio web y paso varios parámetros a Javascript. Este es mi código:
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html", param1="Hello")
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
<script>console.log({{param1}})</script>
</html>
De esta manera, funciona sin problemas. El ejemplo es mi propio simplificado. Pero, si quiero tener el script en un archivo externo y llamarlo así:
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
<script src="/static/js/myjs.js"></script>
</html>
Y el archivo
myjs.js
es
console.log({{param1}})
, entonces no funciona.
Entonces, ¿hay alguna manera de pasar parámetros en archivos Javascript externos con Python Flask?
Si desea renderizar un archivo con Jinja, debe llamar a
render_template
y pasarle los valores deseados.
Simplemente vincular directamente a un archivo estático obviamente no hace eso.
Una solución es usar el bloque de
include
de Jinja.
Esto requiere que ''myjs.js'' esté en la carpeta ''templates / js'', y lo incluirá en la plantilla renderizada, pasando todo el contexto de las plantillas a la plantilla incluida.
<script>{% include ''js/myjs.js'' %}</script>
La mejor solución es no requerir renderizar el js en cada solicitud, y pasar parámetros a las funciones js desde su plantilla.
<script src="{{ url_for(''static'', filename=''js/myjs.js'') }}"></script>
<script>
my_func({{ my_var|tojson }});
</script>
Utilicé una forma diferente de cargar un archivo javascript especificado en la página html:
En primer lugar, defino algunas variables dentro de las etiquetas
<head></head>
y llamo a mi archivo javascript:
<head>
...
<script src="/static/js/jquery.js"></script>
<script type=text/javascript>
$(document).ready(function() {
$link_subcat = "{{ url_for(''load_subcategories'') }}";
$link_cat = "{{ url_for(''load_categories'') }}";
});
</script>
<script src="{{ url_for(''static'', filename=''finances.js'') }}"></script>
...
Este es el contenido de mi archivo javascript:
$(document).ready(function() {
$("#category").change(function() {
$.ajax({
type: "POST",
url: $link_subcat,
data: {cat: $(this).val()},
success: function(data) {
$("#subcategory").html(data);
}
});
});
$("input[name=type]").change(function() {
$.ajax({
type: "POST",
url: $link_cat,
data: {type: $(''input[name="type"]:checked'').val()},
success: function(data) {
$("#category").html(data);
}
});
});
});
Este enfoque funciona para mí.