Return JSON from Flask to AJAX via POST

Question

I'm using AJAX to send a user-input form to Flask, where it is processed, used in a query, and the results are sent back as a JSON object. AJAX is called upon form submission, and I'm returning the proper query results. But, when the results are returned, the JSON object is printing to the browser window, not maintaining the template format of the original page.

views.py

@app.route('/table_data', methods=['POST'])
def table_data():
    request_info = request.form
    #Incoming data is processed here and converted into following format:
    data = [{'name': 'bill', 'state': 'CA', 'id': 012345},
            {'name': 'cindy', 'state': 'NY', 'id': 098765}, ...]
    return jsonify(data)

index.html:

<script type="text/javascript" src="{{ url_for('static'), filename='/js/script.js'}}"></script>
<form action="{{ url_for('table_data') }}" class="form-inline" method="post"
        role="form" enctype="application/json">
    <input type="text" class="form-control" id="name" name="name">
    <input type="text" class="form-control" id="state" name="state">
    <input type="text" class="form-control" id="id" name="id">
    <button type='submit' class="btn btn-default">Submit</button>
</form>
<p id="response"></p>

script.js:

$(document).ready(function() {
    $('form').on('submit', function(event) {
        $.ajax({
            url: '/table_data',
            data: $('form').serializeArray(),
            type: 'POST',
            success: function(response) {
                $('#response').text(response);
            }
        })
    });
});

I expect the returned JSON object to be printed to the screen underneath the form, but instead, the data returned is printed directly to the browser window, which doesn't maintain the structure of 'index.html' (which has navbars and a form). I am returned this:

[
    {
        'name': 'bill',
        'state': 'CA',
        'id': 012345
    },
    {
        'name': 'cindy',
        'state': 'NY',
        'id': 098765
    },
    ...
]

Again, this is the proper format, but the data isn't printing to the data

like I want it to. Brand new to JavaScript and jQuery/AJAX, so I'm fairly sure I'm missing something pretty trivial.

You are not preventing the default action of the form submission. The user submits the form and the browser sends the request and loads that page. — Patrick Evans
– Patrick Evans, Commented Jul 1, 2017 at 18:43
@PatrickEvans I tried adding "event.preventDefault();" under the "})" .ajax close, but nothing changed — nat5142
– nat5142, Commented Jul 1, 2017 at 19:03
It should work. Make sure that you include your script properly (can you open link generated by {{ url_for('static'), filename='/js/script.js'}} in your browser?). — krassowski
– krassowski, Commented Jul 1, 2017 at 20:01

nat5142 · Accepted Answer · 2017-07-01 20:31:02Z

SOLUTION:

Turns out I had quite a few issues going on. First, in a line I didn't include in the OP, my load of jQuery was bad. Not sure why, but I opened my console and saw the JS error (using Chrome, right click >> inspect >> "Console" tab at top right of page). I changed this from what I had (src="{{ url_for('static', filename="/js/jquery-3.2.1.min.js) }}" ) and instead just loaded it as a google hosted library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

My response was then printed in the paragraph id="repsonse", but as:

[object, Object], [object, Object], ..., [object, Object]

To actually print the contents of the JSON object, I changed the line

$('#response').text(response);

to:

$('#response').text(JSON.stringify(response));

That printed my JSON objects with their contents to a paragraph on the page.

Collectives™ on Stack Overflow

Return JSON from Flask to AJAX via POST

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related