Menu
I want to retrieve the data from the variable 'clicked' so I can use it in SQL queries in Flask.
JQuery
$(document).ready(function(){
var clicked;
$(".favorite").click(function(){
clicked = $(this).attr("name");
$.ajax({
type : 'POST',
url : "{{url_for('test')}}",
data : clicked
});
});
});
Flask/Python
@app.route('/test/', methods=['GET','POST'])
def test():
return render_template('test.html')
464
Python for web development using FlaskThe Form data received by the triggered function can collect it in the form of a dictionary object and forward it to a template to render it on a corresponding web page. In the following example, '/' URL renders a web page (student.
jQuery is a small JavaScript library commonly used to simplify working with the DOM and JavaScript in general. It is the perfect tool to make web applications more dynamic by exchanging JSON between server and client.
Now we’ll use jQuery AJAX to post the form data to the Python Flask method. Create a new JavaScript file called script.js_and include it after jQuery in _signUp.html. We’ll attach a click event on button click and call python method using jQuery AJAX. Here is how the script.js looks like:
Now coming to the exciting part of getting POST data in Flask. The very first way of getting POST data is using Form data. this form data is retrieved from a form that is sent as a POST request to a route. In this scenario, the URL doesn’t see the data, and it gets passed to the app from the forms behind the scenes.
Why Python Flask jQuery AJAX ? Why do we need to use jQuery AJAX along with a python web application ? When creating a web application it’s often needed to pass in the data from client side to the server side methods to get response from the server. jQuery is just one simple way to achieve this.
Let’s take a simple HTML file having two input fields. The user will enter the first name and last name and the data will be sent to the flask route as Post request and it will display the value of the field in the HTML.
You can compose your payload in your ajax request as so:
$(document).ready(function(){
var clicked;
$(".favorite").click(function(){
clicked = $(this).attr("name");
$.ajax({
type : 'POST',
url : "{{url_for('test')}}",
contentType: 'application/json;charset=UTF-8',
data : {'data':clicked}
});
});
});
In your flask endpoint, you can extract the value as follows:
@app.route('/test/', methods=['GET','POST'])
def test():
clicked=None
if request.method == "POST":
clicked=request.json['data']
return render_template('test.html')
I used the best answer but i found a bad request error. I solve this error as below:
1- remove this line from ajax request:
contentType: 'application/json;charset=UTF-8',
2- Access to data by request.form instead of request.json.
The Javascript part will similar to this:
$(document).ready(function(){
var clicked;
$(".favorite").click(function(){
clicked = $(this).attr("name");
$.ajax({
type : 'POST',
url : "{{url_for('test')}}",
data : {'data':clicked}
});
});
});
Flask part:
@app.route('/test/', methods=['GET','POST'])
def test():
clicked=None
if request.method == "POST":
clicked=request.form['data']
return render_template('test.html')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
