Push API response data to Flask modal without reloading

Question

I have a Flask app that pulls data from an API response and needs to pass them on to a modal form for user review. Responses vary, and users may take different actions depending on the content of a response. For that and other reasons, I do not want to reload a page. (There are other sections on the page that should stay in front of a user). My js/jquery/ajax skills are not up to par. I should not even be doing this, but whoever should be doing this is not available at the moment. I get API response just fine, but I am having a very serious problem opening a modal with the data extracted from an API response. I either get a modal without data, or get data on a new reloaded page with the modal form file taking over the browser, or get a garden variety of errors. Your knowledgeable advice will be greatly appreciated.

views.py

@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

<div id="form_parent" aria-labelledby="parent_form" data-parent="#button_parent_form">                            

<div class="">
    <form class="selected-form" id="#form_foo" name="form_foo" action="/path/to/foo" method="post">
    <input id="form_foo-csrf_token" name="form_foo-csrf_token" type="hidden" value="...">
    <label class="" for="foo-data1">Foo One</label>
    <input class="" id="foo-data1" name="foo-data1" required="" type="text" value="..."><br>
    <label class="" for="foo-data2">Foo Two</label>
    <input class="" id="foo-data2" name="foo-data2" required="" type="text" value="..."><br>
    <input class="btn-outline-primary" href="#" id="foo-submit" name="foo-submit" type="submit" value="Submit">
    <input class="btn-outline-secondary" id="foo-cancel" name="foo-cancel" type="reset" value="Cancel">
    <input class="btn-outline-danger" id="foo-delete" name="foo-delete" type="submit" value="Delete record">
    </form>
</div>
                            
<div class="modal fade" id="responseData" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="responseDataLabel">Response Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
            {%- include './view/show_response.html' with context -%}
            </div><br>
            <div class="modal-footer">
                <button type="button" class="btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</div>

file.js

<script>
    $(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');
        });
    });
</script>

show_response.html

<p>Please review a response to your data entry.</p>
<div class="row">
    <div class="col-12 col-md-6">
        <h2 class="text-center">Response Data</h2>
        <p id="response">Response: {{ response }} </p>
        <p>...</p>
    </div>
    <div class="col-12 col-md-6">
        <h2 class="text-center">Request Data</h2>
        <p>Request: ... </p>
        <p>...</p>
    </div>
</div>