Sending JSON to Flask with jQuery gives error [duplicate] - python

This question already has answers here:
jQuery posting JSON
(3 answers)
Closed 6 years ago.
I want to use jQuery to send JSON data to a Flask route. However, request.get_json() gives an error. Why doesn't this work?
my_array = {"student_data":{"actual_data":12,"sheet_data":23,"age":"20"},"teacher_data":{"actual_data":193,"sheet_data":203,"age":"40"},"school_data":{"actual_data":593,"sheet_data":29,"age":"49"}};
$.ajax({
url: '/submit_method',
data: my_array,
contentType: 'application/json; charset=utf-8',
type : 'GET',
async: 'false',
success: function (serverResponse) {
}
});
#app.route('/submit_method', methods=['GET'])
def submit_method():
k = request.get_json()
return ''

You have to use POST method instead of GET.
#app.route('/submit_method', methods=['POST'])
def submit_method():
k = request.data # gets request body in form of dictionary
return json.dumps(k) # converts dictionary to json
$.ajax({
url: '/submit_method', data: JSON.stringify(my_array),
contentType:"application/json; charset=utf-8",
type : 'POST', async: "false", success : function (serverResponse) {}});

The issue is JavaScript has to be converted to a JSON string first, using JSON.stringify. Otherwise Flask will not consider it application/json content type and deny the request with a 400.
$.ajax({
url: '/submit_method',
data: JSON.stringify(my_array),
contentType: 'application/json; charset=utf-8',
type : 'GET',
async: 'false',
success: function (serverResponse) {
}
});

Related

Issue with sending data to python flask from AJAX

I am not able to retrieve data field of AJAX in python flask.
Its shows type error when I try to retrieve data. type and forwho are of array type. When I alert them in AJAX it works.
Here is my code,
// Ajax
$.ajax({
url: '/products',
data: JSON.stringify({'type':type,'forwho': forwho}),
contentType: "application/json; charset=utf-8",
type: 'POST',
success: function(response){
/*alert("success");*/
$("#content").html(response);
},
error: function(error){
/*alert("error");*/
console.log(error);
}
});
# app.py
#app.route('/products', methods =['POST', 'GET'])
def all_products():
if request.method == 'POST':
print("inside all products post")
type = json.loads(request.form.get('type'))
forwho = json.loads(request.form.getlist('forwho'))
print(type)
print(forwho)
when I print print(request.args.get('typearr')) in all_products() it returns None
type =request.json['type']
forwho = request.json['forwho']
Flask automatically parses JSON when having application/JSON in your request.
This solution finally worked for me.
ajax:
data: JSON.stringify({'typearr':type,'forwho':forwho})
``````````````````
app.py:
#import ast
``````````````
data = request.get_data()
data = ast.literal_eval(data.decode("UTF-8"))
typearr = data['typearr']
forwho = data['forwho']

Flask request.get_json() returns string not json

using Flask 1.0.2 on Windows and Python 3.6 64bit
first i send data via jquery ajax call, which on JS side is valid json
var myData = '{ "id": "' +clickedID +'" }'
$.ajax({
type: "POST", // HTTP method POST or GET
contentType: 'application/json; charset=utf-8', //content type
url: $SCRIPT_ROOT + '/colors/delete', //Where to make Ajax calls
dataType:'json', // Data type, HTML, json etc.
processData: false,
data:JSON.stringify(myData),
});
in flask I catch the POST request and try to parse it:
if request.method == "POST":
print("got request method POST")
if request.is_json:
print("is json")
data_json = request.get_json(force=True)
data_req = request.data
print("{} is {}".format(data_req, type(data_req)))
print("{} is {}".format(data_json, type(data_json)))
data_json2 = json.loads(request.get_json(silent=True, force=True))
print("{} is {}".format(data_json2, type(data_json2)))
print (request.json.keys())
with the result:
got request: POST
is json
b'"{ \\"id\\": \\"1\\" }"' is <class 'bytes'>
{ "id": "1" } is <class 'str'>
{'id': '1'} is <class 'dict'>
print (request.json.keys())
AttributeError: 'str' object has no attribute 'keys'
JSON.stringify() takes a Javascript object and turns it into a JSON string. You're not passing it an object, you're passing it a string, which is then converted into JSON again.
Because the request data contains double-encoded JSON, the request.json attribute gives you back a string rather than a dictionary.
To fix, change:
var myData = '{ "id": "' +clickedID +'" }'
to:
var myData = { id: clickedID }
In overview, you serialise an object to JSON, which is in effect a string, POST it using the JSON data type, then deserialise it to get the object back. Some objects are easy to serialise and de-serialise with off the shelf functions). See an example based your code modified below (Ignore the CORS as that's due to my test evironment set up).
import logging, json
from flask import Flask, request, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
#app.route("/api",methods=['POST'])
def hello():
logging.info('hello')
if request.method == "POST":
print("got request method POST")
if request.is_json:
print("is json")
data = request.get_json()
print("type of data {}".format(type(data))) # type dict
print("data as string {}".format(json.dumps(data)))
print ("keys {}".format(json.dumps(data.keys())))
return jsonify(message='success')
if __name__ == "__main__":
app.run()
<html>
<style>
</style>
<button onClick="_ajax()">POST</button>
<script src="jquery.js"></script>
<script>
const url_path = "http://localhost:5000/api";
function _ajax() {
console.log('_ajax called');
var xhttp = new XMLHttpRequest();
var clickedID="testClickedID";
var myData = {"id": clickedID};
$.ajax({
type: "POST", // HTTP method POST or GET
contentType: 'application/json; charset=utf-8', //content type
url: url_path, //Where to make Ajax calls
dataType:'json', // Data type, HTML, json etc.
processData: false,
data: JSON.stringify(myData),
}).done(
function(data) {
console.log(data);
}
);
}
</script>
</html>

Flask receiving Post Json

I'm working on a flask web application in which the client posts data to the server in the form of:
{
"sess_id" : 1 ,
"annotations" :
[ {"tag_start" : "TIME","tag_end" : "TIME","tag" : "YOUR_TAG"}, {"tag_start" : "TIME","tag_end" : "TIME","tag" : "YOUR_TAG"}, {"tag_start" : "TIME","tag_end" : "TIME","tag" : "YOUR_TAG"}]
}
Here is the full Ajax post...
$.ajax({
url: 'http://127.0.0.1:5000/api/saveannotation',
type: 'POST',
headers: {'Content-Type' : 'application/json'},
data: {'sess_id' : $('#sessionid_area').val(),
'annotations': JSON.parse(annotations)},
success: function(data) { alert(data.status); }
});
so I can even see this on the api side, which is defined as such:
#sessionapis.route('/saveannotation', methods=['GET', 'POST'])
#login_required
def save_annotation():
rData = request.data
if request.method == 'GET':
return jsonify({'status' : 'success GET'})
else:
return jsonify({'status' : 'success'})
The issue is that data is a "byte" type, not a dict. I also can't call request.json or request.get_json(silent=True), it returns "400 bad request".
Here is a sample of what is in request.data:
b'sess_id=1&annotations%5B0%5D%5Btag_start%5D=2...
it appears to be url encoded for some reason. Values is also empty. If I choose to do something wild, like leave out the content-type = json; I can get a dict-like thing, but I have to access it very oddly. I don't get individual objects, but rather just flat access to all properties.
Any thoughts on how to just get the json parsed into a reasonable object?
Thanks for any hints!
Just passing a content-type header of JSON doesn't actually make the data itself into JSON. You either need to do that yourself, or tell jQuery to do so.
$.ajax({
url: 'http://127.0.0.1:5000/api/saveannotation',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({'sess_id' : $('#sessionid_area').val(),
'annotations': JSON.parse(annotations)}),
success: function(data) { alert(data.status); }
});
Now your data will be in JSON format and you can get it as a Python dict with request.get_json().

web2py - getting posted json data through jquery

I'm new to web2py, trying to alter an existing application.
I have a JSON object in my JS, which I want to send to the server.
My JS is:
post_data = {ios: [{k:"v"},
{k: "v"},
{k: "v"}]};
$.post("/url", post_data, function(data) {}, "json"); // used with 'json' and without, same results
I want to access this data in my controller. so there, I tried to use request.vars.ios and request.post_vars.ios, getting a None ...
What am I doing wrong?
(note: the data is transmitted, and if i try to dump the request.vars, I get something like
<Storage {'ios[1][ranges_colors]': '', 'ios[0] .... etc which contains the data)
Try this, on the client:
$.ajax({
type: 'POST',
url: '/url.json',
contentType: "application/json; charset=utf-8",
data: post_data,
dataType: 'json',
success: function(data) { alert('Data sent'); }
});
Then on the server:
data = gluon.contrib.simplejson.loads(request.body.read())

How to post data structure like json to flask?

I have a data structure like this:
I'm try to send it to server by $.ajax:
$.ajax({
type: 'POST',
data: post_obj, //this is my json data
dataType: 'json',
url: '',
success: function(e){
console.log(e);
}
});
and I want get it in server by flask: title = request.form['title'] working fine!
But how do I get content ?
request.form.getlist('content') doesn't work.
This is the post data in firebug:
Thanks a lot :D
You are sending your data encoded as query string instead of JSON. Flask is capable of processing JSON encoded data, so it makes more sense to send it like that. Here's what you need to do on the client side:
$.ajax({
type: 'POST',
// Provide correct Content-Type, so that Flask will know how to process it.
contentType: 'application/json',
// Encode your data as JSON.
data: JSON.stringify(post_obj),
// This is the type of data you're expecting back from the server.
dataType: 'json',
url: '/some/url',
success: function (e) {
console.log(e);
}
});
On the server side data is accessed via request.json (already decoded):
content = request.json['content']
If you inspect the POST being submitted by jQuery, you will most likely see that content is actually being passed as content[]. To access it from the Flask's request object, you would then need to use request.form.getlist('content[]').
If you would prefer to have it passed through as content, you can add traditional: true to your $.ajax() call.
More details about this can be found in the 'data' and 'traditional' sections of http://api.jquery.com/jQuery.ajax/.

Categories