How to send data from Javascript input to Flask

Question

I've a table with buttons for each row. If I click a button, say row 3, the ID for row 3 will appear in both an alert, and also in console.log. I ultimately want to send the row id to flask python, and then that id number can be used to delete or duplicate the row in question.

I need to use Ajax post, and it works fine with this example in the link below. https://github.com/bsaldivaremc2/send_receive_data_with_flask

When I modify my existing code to incorporate the ajax post from the example in the link above, I keep getting this error in the command terminal and in the console inspect.

Command terminal:

TypeError: 'int' object is not callable The view function did not return a valid response. The return type must be a string, tuple, Response instance, or WSGI callable, but it was a int.

Console inspect: POST http://127.0.0.1:5000/delete_data 500 (INTERNAL SERVER ERROR)

Here is my HTML/JS

test2.html

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script   src="http://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>
    type="text/javascript"
    src="//code.jquery.com/jquery-1.9.1.js"
</script>

<title>Test 1</title>

<style>


table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}



</style>

</head>
<body>




<table id="table-test">
<tr><th>ID</th><th>Student</th><th>Delete</th></tr>

<tr><td class="ids">1</td><td>Chelsey</td><td><button id="Approved">Del</button></td></tr>

<tr><td class="ids">2</td><td>Michael</td><td><button id="Approved">Del</button></td></tr>
<tr><td class="ids">3</td><td>Jared</td><td><button id="Approved">Del</button></td></tr>
</table>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script   src="http://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>



<script type="text/javascript">




$(document).ready(function(){
$(document).on("click","#Approved",function(){
    var info = $(this).parent().siblings('.ids').text();
    var all_info  = $(this).parent().siblings("#table-test");

    alert(info);

    console.log("Del button clicked!");


    var num = info.trim().toString();

    console.log(num);
    console.log(typeof(num));

    var row = {"id": num};

    row["id"] = num;

    console.log(typeof(num));

    var server = "http://127.0.0.1:5000";
    var appdir = "/delete_data";

    $.ajax({

        type:"POST",
        url: server+ appdir,
        data: JSON.stringify(info),
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        success: function(res){

            console.log(res);
        }
    })


});

});


</script>

</body>
</html>

My Flask I'm trying to send the row id number to the delete_data view function.

from flask import render_template, jsonify, Flask
import json

app = Flask(__name__)

@app.route("/delete_data", methods = ["GET", "POST"])
def delete_data():


    print("Deleting selected row!")
    rf = request.form
    print(rf)


    for key in rf.keys():


        data = key


    print("DATA: ", data)

    data_dic = json.loads(data)

    id_data = data_dic["id"]

    print(data_dic)
    print(id_data)


    print(type(data_dic))
    print(type(id_data))


    return id_data





@app.route("/test2", methods = ["GET", "POST"])
def test2():


    return render_template("test2.html")


if __name__ == "__main__":

    app.run(debug=True)

Any help would be greatly appreciated. Thanks!

Tomáš Linhart · Accepted Answer · 2019-03-20 12:00:38Z

2

The error message pretty much says it all. The problem is most probably in this:

id_data = data_dic["id"]
...
return id_data

You are returning id_data which is an int, but you need to return either of the types specified in the error message. Try it like this:

return jsonify({'id': id_data})

EDIT: To answer the follow up question in the comment. You get an empty dictionary when printing request.form (as a rf variable) because you are actually not posting form data to the view function, but sending JSON body in the POST request. To get the data you have to use request.get_json() instead of request.form.

edited Mar 20, 2019 at 12:00

answered Mar 20, 2019 at 10:35

Tomáš Linhart

10.2k1 gold badge30 silver badges42 bronze badges

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

4 Comments

MichaelRSF Over a year ago

Thanks for the possible solution. I no longer get the INTERNAL ERROR 500 nor the int error in the command terminal, but I am just getting an empty ImmutableMultiDict([ ]). No idea why though.

Tomáš Linhart Over a year ago

Where do you get that? Is it an error, or you have just an empty variable? Either way, you can edit the question and provide additional information so we can help.

MichaelRSF Over a year ago

Oh, I get the error (not technically an error, just no data for Flask to work with) in the command terminal. In the github link for the (modified here for simplicity) def sum() view, rf=request.form, print(rf), return "1" gives me a ImmutableMultiDict([('{"sum":[3,2]}','']), but the same code won't work for def delete_data. Just an empty ImmutableEmptyDict.

MichaelRSF Over a year ago

Thanks Tomas, I get a json dictionary, so I can use JavaScript input data in Flask now. The ImmutableMultiDict is still empty, but isn't needed now. Much appreciated for your patience!

Collectives™ on Stack Overflow

How to send data from Javascript input to Flask

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related