Drücken Sie API -Antwortdaten in Flask -Modal ohne Nachladen
Posted: 05 Feb 2025, 01:17
Ich habe eine Flask -App, die Daten aus einer API -Antwort zieht und sie an ein modales Formular für die Benutzerüberprüfung weitergeben muss. Die Antworten variieren, und Benutzer können je nach Inhalt einer Antwort unterschiedliche Aktionen ergreifen. Aus diesem und anderen Gründen möchte ich keine Seite neu laden. (Es gibt andere Abschnitte auf der Seite, die vor einem Benutzer bleiben sollten.) Meine JS/JQuery/Ajax -Fähigkeiten sind nicht auf dem neuesten Stand. Ich sollte das nicht einmal tun, aber wer auch immer dies tun sollte, ist momentan nicht verfügbar. Ich bekomme eine API -Antwort gut, aber ich habe ein sehr ernstes Problem, ein Modal zu öffnen, wobei die Daten aus einer API -Antwort extrahiert wurden. Ich erhalte entweder ein Modal ohne Daten oder erhalte Daten auf einer neuen neu lodenen Seite, wobei die modale Formulardatei den Browser übernimmt, oder erhalte eine Gartenvielfalt von Fehlern. Ihr sachkundiger Rat wird sehr geschätzt.
File.html
File.js
Show_Response.html
Code: Select all
@view_bp.route('/main', methods = ['GET', 'POST'])
def main():
formFoo = formBase(prefix = 'foo')
if request.method == 'GET':
// fill form
if request.method == 'POST':
if formFoo.submit.data:
foo_data1 = formFoo.field1.data
foo_data2 = formFoo.field2.data
access_token = current_app.config.get('ACCESS_TOKEN')
data_request = call_procedure(foo_data1, foo_data2, access_token)
current_app.data_response = response_procedure(data_request)
data_response = current_app.data_response
// other stuff
return render_template('view/file.html')
@view_bp.route('/show_response', methods = ['GET', 'POST'])
def show_response():
response = current_app.data_response
return render_template('view/show_response.html', response = response)
Code: Select all
Foo One
Foo Two
Response Data
×
{%- include './view/show_response.html' with context -%}
Close
Code: Select all
$(document).ready(function(){
$('#form_foo').on('submit', function(e){
e.preventDefault();
let data = response;
$.post('view.show_response', $(this).serialize(), function(data) {
$("#response").json(data);
});
$('#responseData').modal('show');
});
});
Code: Select all
Please review a response to your data entry.
Response Data
Response: {{ response }}
...
Request Data
Request: ...
...