фляга jsonify не отображается в html (ajax)

Question

У меня есть 3 формы на той же HTML-странице, и одна из них - загрузить CSV-файл. Эта форма корректно загружается (получена на сервер), но полученный ответ от сервера не отображается в html - вместо этого просто в браузере в качестве необработанного / проанализированного объекта: щелкните для скриншота браузера .

Это HTML:

    <div class="container">
       <div class="">
     <div class="jumbotron" style="overflow-x:scroll; white-space: nowrap;">
        <form id="upload" name="form_upload" enctype="multipart/form-data" method="post" action="/uploadcsv">
           <div class="col">
              <input type="file" name="data_file" />
              <button id="btn_upload" type="submit" class="btn btn-primary" >Upload</button>
           </div>
        </form>

И вот где он должен отображаться:

<div class="table table-hover">
   <div id="firsthead">
   </div>
</div>

Вот код JavaScript для формы:

   <script>
  $(document).ready(function(){
    var upload_data = new FormData($('#upload')[0]);
      $("#button").click(function(e){
        e.preventDefault();
          $.ajax({
            data: upload_data,
            type : 'POST',
            url : '/uploadcsv',
            success: function(d){
              $("#firsthead").html(d.head_table);
          }
        });
      });
  });</script>

Вот приложение для колб:

@app.route('/uploadcsv', methods=["POST"])
def uploadcsv():
    print('hello uploadcsv')
    print('type (request)', type (request.files['data_file']))
    f = request.files['data_file']
    if not f:
        return "No file"
    df = pd.read_csv(f)
    print('df.head(): ', df.head())
    df.to_csv('../data/df.csv')
    head1 = print_head(df)
    print('the head', head1)
    columns = list(df.columns)
    return jsonify(head_table = head1)

Я не могу понять, почему это не работает - потому что у меня есть почти идентичная ситуация на той же странице, где это работает. Разница лишь в том, что хорошая форма - это не загрузка файла.

Спасибо за любые указатели!

Answer 1

Я подозреваю, что происходит то, что поведение формы по умолчанию не отключено и при отправке, оно перенаправляет на результат

Попробуй явно вызвать форму отправки и предотвращать дефолт

<script>

    $("#upload").submit(function(e) {
        e.preventDefault();
    });

      $(document).ready(function(){
        var upload_data = new FormData($('#upload')[0]);
          $("#button").click(function(){
              $.ajax({
                data: upload_data,
                type : 'POST',
                url : '/uploadcsv',
                success: function(d){
                  $("#firsthead").html(d.head_table);
              }
            });
          });
      });</script>

Answer 2

Попробуйте установить " cache, processData, contentType " в false

<script>
  $(document).ready(function() {
    // submit event
    $("#upload").submit(function(e) {
      e.preventDefault();
      var upload_data = new FormData($('#upload')[0]);
      $.ajax({
        data: upload_data,
        type: 'POST',
        url: $(this).attr('action'),

        // Options to tell JQuery not to process data or worry about content-type
        cache: false,
        processData: false,
        contentType: false,

        success: function(d) {
          $("#firsthead").html(d.head_table);
        }
      });
    });
  });
</script>