使用 AJAX 将 JSON 数据传递给 django

Question

我在 Ubuntu 17.10 上使用 python3.6 和 Django 2.0.3。我对 Django 有点陌生，并试图理解它。我在 html 页面中有一个包含一些输入字段的表格，用户将在其中输入数据。下面我的 AJAX 代码从表行中获取数据并将其传递给 django 视图。 CSRF 是按照 django 文档处理的，因为我的 html 中没有表单。

这是我的 AJAX 代码（使用 jQuery）

$(document).ready(function() {
    var table = $('#example').DataTable();
    $('button').click( function() {
        var TableData = new Array();
        $('#example tr').each(function(row, tr){
            TableData[row]={
                "id" : $(tr).find('td:eq(0)').text()
                , "student_name" :$(tr).find('td:eq(1)').text()
                , "marks" : $(tr).find('td:eq(2) input', this).val()
                , "is_present" : $(tr).find('td:eq(3) select', this).val()
            }    
        }); 
        TableData.shift();  // first row will be empty - so remove
        TableData = JSON.stringify(TableData);
        alert(TableData);
        $.ajax({
            type: "POST",
            url: "{% url 'result:ajax_update_result' %}",
            dataType: 'json',
            data: TableData,
            success: function(msg){
                alert(msg);
            }
        });
        return false;
    } );
});

这是上述 AJAX 中警报调用的结果。相同的数据被传递给处理此 AJAX 调用的 djago 视图代码。

[{"id":"1","student_name":"Test Student","marks":"0.00","is_present":"1"},{"id":"2","student_name":"Test Student3","marks":"0.00","is_present":"1"}]

以下是我对上述 AJAX 调用的 django 视图。

import json
def save_result(request):
    table_data = json.dumps(request.GET.get('TableData'))
    print(table_data)
    return render(request, 'data/dummy.html', {'msg': 'Data Saved.'})

django 控制台为上面的 print(table_data) 打印 null 请注意：我在 django 视图代码中使用了 json.loads 并得到了类型错误。

我希望来自 AJAX 调用的数据被传递给 django 函数，并将数据作为字典打印在控制台中。

Answer 1

您应该首先对 JSON 数据进行字符串化：

$(document).ready(function() {
    var table = $('#example').DataTable();
    $('button').click( function() {
        var TableData = new Array();
        $('#example tr').each(function(row, tr){
            TableData[row]={
                "id" : $(tr).find('td:eq(0)').text()
                , "student_name" :$(tr).find('td:eq(1)').text()
                , "marks" : $(tr).find('td:eq(2) input', this).val()
                , "is_present" : $(tr).find('td:eq(3) select', this).val()
            }    
        }); 
        TableData.shift();  // first row will be empty - so remove
        alert(TableData);
        $.ajax({
            type: "POST",
            url: "{% url 'result:ajax_update_result' %}",
            dataType: 'json',
            data: JSON.stringify({'TableData': TableData}),
            success: function(msg){
                alert(msg);
            }
        });
        return false;
    } );
});

并从request.POST检索它：

import json
def save_result(request):
    table_data = json.loads(request.POST.get('TableData'))
    print(table_data)
    return render(request, 'data/dummy.html', {'msg': 'Data Saved.'})

请注意，我使用的是json.loads，因为您的数据现在已被字符串化。

编辑：我刚刚意识到您实际上是在对 TableData 进行字符串化...但是，您试图从 request.GET 中提取不存在的键 TableData。我相信我更新的答案应该对你有用。