Access a JSON data from python in JavaScript

Question

I have a flask URL called register, where I collect the users's input and process them like so:

@app.route("/register", methods=["POST"])
@login_required
def register_post():
    email = request.values.get("email")
    username = request.values.get("username")
    company_name = request.values.get("company_name")
    password = request.values.get("password")
    confirm_password = request.values.get("confirm_password")
    messages = register(email, username, password, confirm_password, company_name)
    success_message = (
        "Thank you for registering with us. We will get back to you shortly."
    )
    print("request values: ", request.values)
    print("messages: ", messages)
    if (len(messages) == 1) and (messages[0] == success_message):
        return jsonify({"code": 200, "message": messages[0]})
    else:
        return jsonify({"code": 400, "message": messages})

Based on the messages, I would like to display the messages with a native browser pop-up. I am trying to access that JSON data in Javascript like so:

$.ajax({
    url: "/register",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (json) {
        alert(json);
    },
    error: function (e) {
        alert(e);
    }
});

I get the JSON object in the browser but it doesn't alert anything in the browser. what could I be doing wrong?

Screenshot of the dev tools below:

Network tab

if I understand your question correctly this is a JavaScript question and not a python/flask question, could you remove the python tags? — SitiSchu
– SitiSchu, Commented Sep 19, 2022 at 12:08
"it doesn't alert anything in the browser" - Then what does it do? In your browser's debugging tools, are there any errors at all on the development console? On the network tab, is the AJAX request made? What is the server's response? In the script debugger, is either the success or error callback function invoked? What is the observed value of the parameter in that function? — David
– David, Commented Sep 19, 2022 at 12:12
"I get the JSON object in the browser" — What does that mean? Does it render in the main viewport? Are you looking at the response in the Network tab of the developer tools? Something else? — Quentin
– Quentin, Commented Sep 19, 2022 at 12:12
I passed the data from the form no, you didn't pass any data at all in the $.ajax - however, the issue is that the form submit happened, so your $.ajax did not, that's why you get no alerts — Jaromanda X
– Jaromanda X, Commented Sep 19, 2022 at 12:20

Quentin · Accepted Answer · 2022-09-19 12:18:02Z

2

You have some code which is navigating to /register so the JavaScript making the Ajax request is irrelevant.

Presumably you are submitting a form with action="/register".

If you want to perform the Ajax request instead then you need:

An event handler
To prevent the default behaviour of submitting a form

$('form').on('submit', evt => {
    evt.preventDefault();
    //... gather your data for the request body
    $.ajax(...);
});

Note that your existing JS is missing the data property from the object you pass to ajax. You'll need to populate that with the data you are sending.

answered Sep 19, 2022 at 12:18

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

8 Comments

JA-pythonista Over a year ago

How can I use the python function that does the major work for me?

Quentin Over a year ago

@JA-pythonista — I don't know what function you refer to or what it has to do with your question or this answer.

JA-pythonista Over a year ago

this --> messages = register(email, username, password, confirm_password, company_name)

Quentin Over a year ago

@JA-pythonista — I have no idea how that function is supposed to work. Any problems you having using it are a different problem to the one you ask about here (i.e. navigating to the response instead of making an Ajax request) and should be a new question.

JA-pythonista Over a year ago

yes, I am using it, your approach needs me to grab that register form right?

|

Collectives™ on Stack Overflow

Access a JSON data from python in JavaScript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related