Submit AJAX Forms with jQuery and Flask

Pretty Printed · 86K views · 2016 · 13:24

Open on YouTube

Web developmentPython, Ruby & scripting languagestutorial

Why Stack Overflow recommends it

Stack Overflow users link it as a worked example when asking or answering questions about AJAX POST requests between a jQuery front end and a Flask backend.

Recommended by 1 people across 1 different months, 2017 to 2022.

What it is

A 13-minute tutorial from the Pretty Printed channel showing how to submit an HTML form without a page refresh, using jQuery's AJAX function on the front end and a Flask route on the back end. It walks through the code step by step and ties into the channel's Flask course.

What people said

Recommends Sean9XI · 2021-05 · Stack Overflow · on “Javascript data send to python flask with ajax nad message 400 - Bad request”

This youtube video will show you a quick way of understanding Ajax and Flask. [this video] The youtube video also discuses get and post requests.

Cites nat5142 · 2017-06 · Stack Overflow · on “Ajax POST request in Flask”

I'm trying to receive a POST request containing user-input form data using AJAX, but I keep returning errors. I'm following this tutorial [this video] almost verbatim. Here's my code: views.py @app.route('/table_data', methods=['POST']) def table_data(): user_id = request.form['userID'] name = request.form['name'] return user_id, name #of course I'll return something more meaningful in the future datapage.html <script type="text/javascript" src="app/static/js/submit.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="userID" placeholder="4-Character ID"> <input type="text" cl

Cites FloydLee · 2022-09 · Stack Overflow · on “Python w/ Ajax, cant get the variable to display on the main index view”

Here is my form and ajax code: {% extends "base.html" %} {% block app_content %} <head> <title>AJAX Example</title> <script src=" [LINK] "></script> <!-- Latest compiled and minified CSS --> <!-- Latest compiled and minified CSS --> </head> <body> <div class="container"> <br><br><br><br> <form class="form-inline" action="/crowdstrike/process" method="post"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail1">Reg Key Value</label> <input class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" placeholder="Reg Key"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button> </form> <br><br> <div id="successAl