How I can send data from Flask to JavaScript?

Question

Hello I am new and building an application in Flask and Javascript. I have a problem with sending data from Flask do JavaScript.

I have code in routes.py

@app.route('/mapaa',methods=['GET','POST'])
def mapa():
    user_id = current_user.get_id()
    slownik = {}


    if 'event_form' in request.form:
        name = request.form['name_event']
        all_data = Event.query.filter_by(name=name).all()
        for row in all_data:
            date_st_string = str(row.date_start)
            date_end_string = str(row.date_end)
            slownik = {'id':row.id,'date_st':date_st_string,'date_end':date_end_string,'type':row.type,'name':row.name,'len_route':row.len_route,'route':row.route}
        return jsonify(slownik)
    return render_template('mapaa.html', title='Mapa')

I want to send jsonify(slownik) to my code in JavaScript but I dont want to do it with render_template bacause it refresh a page and I need this data to display it on the map using JavaScript. I tried return jsonify(slownik) but it return me the data on new page. How I can send the data when the user click event_form button to JavaScript without refreshing page?

Welcome to SO! Make an AJAX request from your JS, for example, fetch('/mapaa', {method: 'post',body: data,}).then(res => res.json()).then(data => console.log(data)). See How do I post form data with fetch api? — ggorlen
– ggorlen, Commented Jun 6, 2021 at 15:51
Thank you for answer. I don't understand much of fetch and I don't know what I need to replace` data` in body. — helper
– helper, Commented Jun 6, 2021 at 18:16
That's for you to decide--it's your POST request. data is form data built as shown in the link above. — ggorlen
– ggorlen, Commented Jun 6, 2021 at 18:25
So if I want do send slownik how I can do it? I need send it like variable or what? — helper
– helper, Commented Jun 6, 2021 at 18:31
You may be a bit confused about the overall concept going on here. When you POST, you send a request to a server with a payload (some form data, JSON, text, etc). The server receives the POST request at an endpoint, does some processing or fetches DB results and sends a response back to the client. In this case, the client is the front-end JS code, the server is your Flask app. slownik looks rather odd because it'd only contain the last row's data, but the bottom line is that return jsonify(slownik) responds to the front-end POST request with whatever's in slownik. — ggorlen
– ggorlen, Commented Jun 6, 2021 at 18:34

charchit · Accepted Answer · 2021-06-06 19:56:34Z

1

You can use ajax for sending post request without refreshing the page. Note- include jquery before this

<script src="https://code.jquery.com/jquery-3.1.0.js" ></script>

javascript code

$("#id_of_btn").click(function () { // make ajax request on btn click
  $.ajax({
    type: "POST",
    url: "/mapaa", // url to the function
    data: {
      name: $("#id_of_input_tag").val(), // value of the form
    },
    success: function (response) {
      console.log(response); // response contains the json
    },
  });
});

make sure you don't use form tag.

Edit: If you want to send more data via forms, you could use

data: $('form').serialize()

this will take the name attribute of input tag and add it in the request.data So if you have this

<input type="text" id="element_id" name="username" >

You can use the value of name attribute like this request.data['username'] follow this tutorial

edited Jun 6, 2021 at 19:56

answered Jun 6, 2021 at 17:43

charchit

1,5222 gold badges8 silver badges17 bronze badges

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

11 Comments

helper Over a year ago

Thank you for answer. I did that i place this js code in my JavaScript but it return in console my html code of my mapaa.html. I did something wrong or I need to add something to this code ?

helper Over a year ago

So if I dont need form tag this line: name = request.form['name_event'] in my Flask code is unnessecary because I use data: {name: $("#id_of_input_tag").val() }, and this replaces it right ?

charchit Over a year ago

No!! don't copy the answer as it is, it need changes , for eg. where I wrote id_of_input there you need to include of the value of the input tag which is used in html like `$("#name").val()1 where name is the id of the input

helper Over a year ago

Yes I know i did it. But it returns me html code of my mapaa.html. I need to add something else to return json and my data from slownik?

helper Over a year ago

Yes I did it but it returns jquery-3.4.1.min.js:2 POST http://127.0.0.1:5000/mapaa 500 (INTERNAL SERVER ERROR)

|

Collectives™ on Stack Overflow

How I can send data from Flask to JavaScript?

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related