Ajax error on Flask web app

Question

I am making a small Flask app. For now, one of the functions I want to implement is that:

upload an Excel file
do some data cleaning by using pandas
show the result dataframe on webpage by using AJAX and also bootstrap-table

I am stuck. Here is my code:

views.py

@app.route('/extract', methods=['GET', 'POST'])
def extract_excel():
  file = request.files['file']

  # SKIP: data extract and transform process, I get a valid dataframe

  df_json = df.to_json(orient="records", force_ascii=False)
  df_json = str(df_json)

  return df_json

index.html

<body> 
<div>
  <form action="/extract" method="post" enctype="multipart/form-data">
    <input type="file" name="file"></input>
    <input type="text" name="upload_date" placeholder="2018-01-01"></input>
    <button type="submit" id="showtable">preview</button>
  </form>
</div>   
</body>
<body>
<table data-toggle="table" id="WorkTable">
    <thead>
      <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
        <th>...</th>                               
      </tr>
    </thead> 
</table> 
</body>

<script>
  $(document).ready(function() {
    $('#showtable').bind("click", function(){
        $.ajax({
            type: "POST",
            url: "/extract",           
            dataType: "json",
            success: function (msg) {
                $("#WorkTable").bootstrapTable('load', msg);
            },
            error: function () {
                alert("wrong");
            }
        });
      });
    });  
</script>

I guess the problem is due to the ajax part. Because I inspected the Console, found POST http://127.0.0.1:5000/extract 400 (BAD REQUEST) appeared very quickly. I guess it should be executed when the file is uploaded and return a response? But I don't know how to fix it.

You're not sending any data in your Ajax post. – Daniel Roseman Jun 13 '18 at 18:22 — Daniel Roseman, Jun 13 '18 at 18:22

score 0 · Accepted Answer · answered Jun 13 '18 at 19:42

0

As noted by Daniel Roseman's comments, you need to send the form data (via the data attribute in the jQuery .ajax call). You'll probably want to have a look at the FormData docs.

You may also find it useful to make sure you're running with Flask in debug mode so that you get more detailed error messages.

answered Jun 13 '18 at 19:42

robmathers

3,028
1
26
29

Yes, you both are right! I did not think of also getting data by `Ajax` at first. I referred to this [post](https://stackoverflow.com/questions/18334717/how-to-upload-a-file-using-an-ajax-call-in-flask) and fixed my codes. Thanks! – lucyf Jun 14 '18 at 14:31

Ajax error on Flask web app

1 Answers1