Estoy usando AJAX para enviar un formulario de entrada de usuario a Flask, donde se procesa, se usa en una consulta y los resultados se devuelven como un objeto JSON. Se llama a AJAX al enviar el formulario y devuelvo los resultados de consulta adecuados. Pero, cuando se devuelven los resultados, el objeto JSON se imprime en la ventana del navegador, sin mantener el formato de plantilla de la página original.
Espero que el objeto JSON devuelto se imprima en la pantalla en la etiqueta p con id="resultado", pero en cambio, los datos devueltos se imprimen directamente en la ventana del navegador,
Guión AJAX
<script type=text/javascript> $(function() { $('button#submit').bind('click', function() { $.getJSON('/index', { text: $('textarea[name="text"]').val(), }, sucess: function(data) { $('#result').text(JSON.stringify(data.result)); }); return false; }); });HTML
<div class="col "> <form action="/" method="POST"> <div class="form-group shadow p-3 bg-white rounded"> <!-- <label for="content">Content</label> --> <textarea class="form-control bg-light" id="text" name="text" placeholder="Copy and paste the text of the URL of the article" rows="13" style="resize: none"></textarea> <a href="#" id="submit"> <button class="btn btn-danger text-white mt-2" type="submit">Summarize </button> </a> </div> </form> </div> <div class="col"> <div class="col shadow p-3 h-100 bg-white rounded"> <p id="result"></p> </div> </div>APLICACIÓN FRASCO
@app.route("/", methods=["GET", "POST"]) def index(): if request.method == "POST": text = request.form.get("text") if text: return jsonify(result=text) else: return jsonify(result="input needed") return render_template("index.html")