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

Posted 2023-05-08

【中文标题】带有ajax的django应用程序用于处理数据帧

【英文标题】：django app with ajax for processing dataframe

【发布时间】：2021-01-07 04:34:34

【问题描述】：

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

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

在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)

indicator.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 成功有什么问题吗？

【参考方案1】：

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

fileprocessed.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" %" /></div>
    <p><b>Loading....</b></p>
</div>
<div id="success">
<table id="load_processed" class="display" >

</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