Os Cuento, tengo una aplicación que tiene 3 botones:
El primero es Formulario (el cual me va a calcular el IMC de una persona a partír de su altura y su peso), además de ingresar los datos en una base de datos; El segundo es Resultado, el botón muestra por pantalla los datos de la base de datos,y el tercero es Informe, este botón muestra por pantalla un pdf con los datos de la base de datos.
El problema que tengo es que el botón Resultado no hace lo que quiero, no me muestra por pantalla los datos, me dá que Json no está definido.
Os paso el código, a ver que me podéis decir:
formulario.html
{% extends "layout.html" %}
{% block content %}
<div class="row">
<div class="col-12 col-md-6">
<form class="form-inline mt-2">
<label for="peso" class="mr-2">Peso</label>
<input type="text" class="form-control mb-2 mr-2" id="peso" name="peso" />
<label for="altura" class="mr-2">Altura</label>
<div class="input-group mb-2 mr-2">
<input type="text" class="form-control" id="altura" name="altura" />
</div>
<button id="insertar" type="submit" class="btn btn-outline-primary mb-2 col-12">Calcular IMC</button>
</form>
<div id="resultado"></div>
</div>
</div>
{% endblock %}
{% block script %}
<script src="../static/js/insertar.js"></script>
{% endblock %}
informe.html
{% extends "layout.html" %}
{% block content %}
<div class="row">
<div class="col-12 col-md-6">
Página de informes
{{ datos }}
</div>
<div class="col-12 col-md-6">
Informes
</div>
</div>
{% endblock %}
layout.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="../static/css/micss.css" rel="stylesheet" />
<title></title>
</head>
<body>
<header>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="bg-warning my-2 rounded-circle text-center">Cálculo IMC</h1>
<p class="text-warning text-md-center text-right">Calculadora índice masa corporal</p>
</div>
</div>
<nav class="">
<ul class="pagination justify-content-left">
<li class="page-item"><a class="page-link" href="/">Formulario</a></li>
<li class="page-item"><a class="page-link" href="/resultado">Resultados</a></li>
<li class="page-item"><a class="page-link" href="/informe">Informe</a></li>
</ul>
</nav>
</header>
<main class="container-fluid">
{% block content %}
{% endblock %}
</main>
<footer class="fixed-bottom">
<div class="container-fluid text-muted footer-copyright">
(c) Introducir Nombre
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.0.js"
integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
crossorigin="anonymous"></script>
{% block script %}
{% endblock %}
</body>
</html>
resultado.html
{% extends "layout.html" %}
{% block content %}
<div class="row">
<div class="col-12 col-md-6">
Página de resultados
</div>
<div class="col-12 col-md-6">
<!-- Resultados
for key, value in datos:
print key
print value
Para recorrer cada nodo dentro de los nodos principales
for hijo in value:
print hijo
print hijo["nombre"]
print otro["color"]-->
<table class="table table-hover table-striped">
<tr>
<th>Peso (Kg)</th>
<th>Estatura (cms)</th>
<!--<th>IMC</th>-->
</tr>
{% for resultado in resultados %}
<tr>
<td>{{ resultado[1] }}</td>
<td>{{ resultado[2] }}</td>
<!--<td>{{ resultado[3] }}</td>-->
</tr>
{% endfor %}
</table>
</div>
</div>
{% endblock %}
views.py
from flask import Flask,render_template,request
from imc import app
from imc import models
from imc.models import Imc
# Make the WSGI interface available at the top level so wfastcgi can get it.
wsgi_app = app.wsgi_app
@app.route('/')
@app.route('/inicio')
def formulario():
"""Renders a sample page."""
return render_template("formulario.html")
@app.route('/resultado')
def resultado():
"""Renders a sample page."""
datos=Imc();
todos = json.loads(datos.vertodos())
return render_template("resultado.html", datos=datos.vertodos())
@app.route('/insertar')
def insertar():
datos=Imc();
_peso = request.args.get('peso')
_altura = request.args.get('altura')
#imc=int(_peso)/(int(_altura)/100)**2
datos.insertar(int(_peso),int(_altura))
return "peso {}, altura{}, imc {}".format(_peso,_altura,imc)
#return redirect('/ver')#nota: da el mismo error que el json, Nombre no definido
@app.route('/informe')
def informe():
datos=Imc()
datos.vertodos()#descomentado
return render_template("informe.html",datos=datos.vertodos())
models.py
# -- coding: utf-8 --
#https://alexanderae.com/sqlalchemy-orm-para-python-1.html
from sqlalchemy import (create_engine, Column, Date, Integer, ForeignKey,String, Table)
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import relationship
from sqlalchemy.orm import sessionmaker
import MySQLdb
import json
engine = create_engine('mysql+mysqldb://root@localhost/ejercicios', echo=True)
Base = declarative_base()
class Imc(Base):
__tablename__ = 'imc'
id= Column(Integer, primary_key=True)
peso = Column(Integer, nullable=False)
altura = Column(Integer,nullable=False)
def vertodos(self):
try:
Session = sessionmaker(bind=engine)
session = Session()
todos=session.query(Imc.id,Imc.peso,Imc.altura).all();
return json.dumps(todos)
except BaseException as error:
msg="Error: {}".format(error)
return msg #nuevo
def insertar(self,peso,altura):
try:
Session = sessionmaker(bind=engine)
session = Session()
nuevo = Imc("", peso, altura)
session.add(nuevo)
session.commit()
msg="Registro insertado correctamente: {} {}".format(peso,altura)
except BaseException as error:
msg="Error: {}".format(error)
return msg
def __init__(self, id=None,peso=None,altura=None):
self.id= id
self.peso = peso
self.altura = altura
Base.metadata.create_all(engine)
__init.py__
from flask import Flask
app = Flask(__name__)
import imc.views
insertar.js
$(document).ready(function () {
// Handler for .ready() called.
$('#insertar').click(function (evt) { //
evt.preventDefault();
$.ajax({
url: '/insertar', //recurso que llamo
type: 'get', //método
dataType: 'text', //tipo de datos que recibo
data: $('form').serialize(), //datos que mando en la petición
success: function (response) {
$("#resultado").text(response);
console.log(JSON.stringify(response));
},
error: function (xhr, resp, text) {
console.log(xhr, resp, text);
}
});
});
});
AÑADO UN EXTRA CON LOS MENSAJES DE ERROR y base de datos
Esta es la base de datos:
y estos son los mensajes de error, acabo de hacer una comprobación
y aquí la modificación de la vista
json
enviews.py
(import json
). Los imports y demás variables globales lo son solo a nivel de módulo, quemodels.py
importejson
yviews.py
importe amodels.py
no implica quejson
esté disponible en el espacio de nombres global deviews.py
, aunque es posible usarlo mediante el namespace de models,models.json.load(datos.vertodos())
, lo apropiado es que importes enviews
el módulo.todos = json.loads(datos.vertodos())
en la vista, hazprint(datos.vertodos())
a ver que te imprime, tiene pinta de estar recibiendo una cadena vacía...