Drücken Sie API -Antwortdaten in Flask -Modal ohne Nachladen ⇐ Jquery

[Guest]

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.

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)

File.html

Code: Select all

Foo One


Foo Two










Response Data

×


{%- include './view/show_response.html' with context -%}

Close

File.js

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');
});
});

Show_Response.html

Code: Select all

Please review a response to your data entry.


Response Data
Response: {{ response }}
...

Request Data
Request: ...
...