Send JSON data to Flask server using JQuery .load()

Question

I am trying to use JQuery's .load() function to send data to my Flask server and, using that, render a <div> that is loaded into the calling element. My call looks something like this:

$("#element").load(
  "/get_data",
  {"info": info} // this is the problem
)

However, when I try to access this data in my Flask backend, the data is of form byte-string. (Accessing with request.get_data() yields a byte-string and request.get_json() yields None).

This did not surprise me, as the same behavior occurs when I use .ajax() requests. With Ajax, I simply use data: JSON.stringify({"info":info}) and that sends a string easily read by json.loads to the Flask backend just fine. What befuddles me is when I attempt the same data packaging with .load(), the request to the server is a GET instead of a POST.

Per .load()'s documentation, "The POST method is used if data is provided as an object; otherwise, GET is assumed." I don't understand why the data being a JSON string alters the behavior of .load() this way.

I'm keen to understand this behavior, but my question is how can I send data using JQuery's .load() to a Flask backend as a POST request in form JSON, or at least readable as a json (e.g. JSON string)?

are you using the right Content-Type header (application/json)? — Andrea Pollini
– Andrea Pollini, Commented Jul 31, 2020 at 16:26
This post may provide the solution you need stackoverflow.com/questions/53502324/decode-json-in-flask — Seyi Daniel
– Seyi Daniel, Commented Jul 31, 2020 at 16:31
@AndreaPollini how would I assert the content-type for the incoming request? You can't do so via .load() and I'm unclear how you'd do that on the backend. — GLaw1300
– GLaw1300, Commented Jul 31, 2020 at 16:33

GAEfan · Accepted Answer · 2020-07-31 16:49:18Z

1

Your code should work. You have data as {"info": info}, which is an object that .load should send as a POST. Make sure you are getting a JSON mimetype object from the server. Also, make sure your Flask view accepts the POST method:

from flask import Flask, request, Response
import json

@app.route('/get_data', methods = ['GET', 'POST'])
def get_data():
    payload_dict = json.loads(request.data.decode('utf-8'))
    # or try payload_dict = request.json
    print(payload_dict["info"])
    return Response(json.dumps({"info_response": "hello"}), mimetype='application/json')

And make sure you have info defined in {"info": info}

Thought about using getJSON: https://api.jquery.com/jQuery.getJSON/ ?

edited Jul 31, 2020 at 16:49

answered Jul 31, 2020 at 16:05

GAEfan

11.4k2 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

GLaw1300 Over a year ago

I think you misunderstood the question. That will send JSON data from the server to the front-end. I'm looking to send data from the frontend to the Flask server.

GAEfan Over a year ago

Your code should do that. Unless info is not defined. Should it be {info: "info"}? Also, does your view accept POST method?

GLaw1300 Over a year ago

No info is just filler, but the actual content in my code does exist. I think the miscue is that .load sends a JSON string as a GET request, but I can't figure out how to get Flask to handle a JSON Object

GLaw1300 Over a year ago

Thank you for your help; unfortunately nothing has worked. I settled on simply parsing the bytestring, which isn't ideal but it's still functional.

GAEfan Over a year ago

Did you use the .decode('utf-8') part in my answer?

|

Collectives™ on Stack Overflow

Send JSON data to Flask server using JQuery .load()

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related