时间戳

首页 > 解决方案 > 带有ajax的django应用程序用于处理数据帧

jquery - 带有ajax的django应用程序用于处理数据帧

问题描述

我试图在用户上传 excel 文件后立即显示繁忙的指示器图像。文件处理完成后，我想用已处理的表替换图像。问题：

  1. ajax 成功块未执行（成功块内的警报消息不起作用）
  2. 上传的数据转换为 json 但无法转换回数据帧进行处理。

在views.py中单击上传按钮时执行的代码

def indicator(request):
    excel_file = request.FILES["excel_file"]
    uploaded_data = pd.read_excel(excel_file)
    df_json = uploaded_data.to_json()
    
return render(request,'myapp/indicator.html',{'df':df_json})

指标.html：

<script>
    var dataframe = JSON.parse("{{df|escapejs}}");
    var replace_data = function(data){
        alert('successs')
        $('#success').append(data.list_of_jsonstuffs);
        $('#loading').remove()
    }
    $(document).ready(function(){
        $.ajax({
            url: '/processing/',
            type:'GET',
            dataType: 'json',
            data: JSON.stringify(dataframe),
            success: function(data){
                alert('ajax done')
                replace_data(data)
            }


        })
    })

    </script>

视图中触发并进行处理的函数。


@csrf_exempt
def processing_file(request):
    if request.is_ajax():
        excel_file1 = json.dumps(request.GET)
        e1 = json.loads(excel_file1)
        input_df = pd.DataFrame.from_dict([e1])
        print(input_df.shape)
        processed = gen.generate_output_columns(excel_file)
        output_validation = processed[const.OUTPUTCOLUMNSWITHVALIDATION]
        excel_data = output_validation.values.tolist()
        return excel_data

input_df 是 1 x 2，但上传的 excel 是 17 x 55。在 JSON Stringify 和 json 加载的某个地方，结构正在发生变化，但是当我尝试使用 POST 时，我曾经能够成功处理，但成功块永远不会被执行。有人可以帮助我了解我的 json 到 django 中的数据帧解析和 ajax 成功有什么问题吗？

标签： jqueryjsondjangoajaxdataframe

解决方案

我能够使用 Ajax POST 而不是 Ajax GET 在 django 应用程序上实现加载动画。发布代码以防出现在搜索结果中。

文件处理.html

    <script>
        var dataframe = JSON.parse("{{df|escapejs}}");
        var replace_data = function(data){
            $('#loading').remove()
            $('#load_processed').DataTable({
                columns:[
                    {title:'col1'},
                    {title:'col2'},
                    {title:'col3'},
                    {title:'col4'},
                    {title:'col5'},
                    {title:'col6'},
                    {title:'col7'},
                    {title:'col8'},
                    {title:'col9'},
                    {title:'col10'},
                    {title:'col11'},
                    {title:'col12'},
                    {title:'col13'},
                    {title:'col14'},
                    {title:'col15'},
                    {title:'col16'},
                    {title:'col17'},
                    {title:'col18'},
                    {title:'col19'},
                    {title:'col20'}
                ],
                data: data
            });
    
        }
        $(document).ready(function(){
            $.ajax({
                url: '/processing/',
                type:'POST',
                data: JSON.stringify(dataframe),
                success: function(data){
                    replace_data(data)
                }
            })
        })
        </script>
<div id="loading">
<div id="img_div">
    {%  load static %}<img src="{%  static  "/img/hourGlass.gif" %}" alt="Hour Glass image, processing"/></div>
    <p><b>Loading....</b></p>
</div>
<div id="success">
<table id="load_processed" class="display" width="100%">

</table>

当用户点击 UI 按钮时触发的功能，

def busy_indicator(request):
    excel_file = request.FILES["excel_file"]
    uploaded_data = pd.read_excel(excel_file)
    df_json = uploaded_data.to_json()
    return render(request,'myapp/file_processed.html',{'df':df_json})

ajax 调用下面的函数（url /processing 显示在上面的 ajax 后代码中），

@csrf_exempt
def processing_file(request):
    if request.is_ajax():
        e1 = json.loads(request.body) #parses incoming json data
        input_df = pd.DataFrame.from_dict(e1) #converts to df as my process script 
                                              #requires dataframe input
        processed = gen.generate_output_columns(input_df) 
        output_validation = processed[const.OUTPUTCOLUMNSWITHVALIDATION]
        excel_data = output_validation.values.tolist()
        return HttpResponse(json.dumps(excel_data), content_type='application/json')#sends 
                   #back json to ajax

推荐阅读