flask上实现dataframe前端显示

Question

正在用 flask 写一个简单的 web app。
想要实现的功能就是：

1. 上传一个 excel 文件
2. 用 pandas 清理一下数据
3. 得到的 dataframe 在前端用表格预览
4. 预览无误后，上传到数据库

现在卡在了 3.前端预览 这里。点击“预览”按钮后，总是会跳转到新的路径 /extract，返回 json 格式的数据。小妹查了很多资料，jquery, jquery.datatables,bootstrap-table，都用了一遍...就是会在 get /extract 400 报错。恳请大家赐教！

views.py

@app.route('/extract', methods=['GET', 'POST'])
def extract_excel():
    file = request.files['file']
    filename = file.filename
    path = os.path.join(os.getcwd(), filename)
    file.save(path)

    # 读取 excel 转化成 df, 省略若干步骤
       
    df_json = df.to_json(orient="records", force_ascii=False)
    return df_json

index.html

    <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">预览</button>
      </form>
    </div> 

求教一个无论用什么插件的前端方法，能在点击“预览”按钮后，ajax 在当前页面显示 dataframe 的方法呢~~~~感恩的心❤