Ubuntu 17.10下通过AJAX向Django 2.0.3传递JSON数据的技术咨询

嘿，看你的描述，你刚接触Django正在学习，用Ubuntu 17.10 + Python 3.6 + Django 2.0.3搭建环境，现在要通过AJAX把带输入字段的DataTables表格数据传给视图，还已经处理了无表单场景下的CSRF问题——这个思路很对！我来帮你补全代码并梳理关键细节，确保数据能顺利传递：

1. 补全后的完整AJAX代码 #

把你没写完的逻辑补全，包含表格数据抓取、CSRF token携带、请求发送全流程：

$(document).ready(function() { 
    var table = $('#example').DataTable(); 

    // 无表单场景下，从cookie中获取CSRF token（Django要求的安全机制）
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    const csrftoken = getCookie('csrftoken');

    $('button').click( function() { 
        // 遍历表格所有行，收集输入字段的数据
        var rowData = [];
        table.rows().every(function() {
            var rowElement = this.node();
            // 建议给输入字段设置name属性，对应后端模型字段，方便处理
            var inputs = $(rowElement).find('input');
            var singleRowData = {};
            inputs.each(function() {
                singleRowData[$(this).attr('name')] = $(this).val();
            });
            rowData.push(singleRowData);
        });

        // 发送AJAX请求到Django视图
        $.ajax({
            url: '/submit-table-data/',  // 替换成你在urls.py中配置的视图路径
            type: 'POST',
            headers: {
                'X-CSRFToken': csrftoken  // 把CSRF token放到请求头里
            },
            data: JSON.stringify(rowData),
            contentType: 'application/json',  // 告诉后端请求体是JSON格式
            success: function(response) {
                console.log('数据提交成功！', response);
                // 可以添加成功后的交互，比如清空输入框、提示用户
                alert('数据已成功提交！');
            },
            error: function(xhr, status, err) {
                console.error('提交失败：', err);
                alert('数据提交失败，请查看控制台日志排查');
            }
        });
    });
});

2. 对应Django视图的处理代码 #

在views.py中编写视图来接收并处理AJAX传来的数据：

from django.http import JsonResponse
import json

def submit_table_data(request):
    # 只处理POST请求
    if request.method == 'POST':
        try:
            # 解析JSON格式的请求体
            data = json.loads(request.body)
            # 这里写你的业务逻辑，比如循环把数据保存到数据库
            # 示例：假设你有个Record模型，字段和输入框name对应
            # from .models import Record
            # for row in data:
            #     Record.objects.create(**row)
            
            return JsonResponse({
                'status': 'success',
                'message': f'成功接收{len(data)}条数据'
            })
        except json.JSONDecodeError:
            return JsonResponse({
                'status': 'error',
                'message': '数据格式错误'
            }, status=400)
    # 非POST请求返回错误
    return JsonResponse({
        'status': 'error',
        'message': '仅支持POST请求'
    }, status=405)

3. 新手必看的关键注意事项 #

• 记得在urls.py中配置对应路由：

  from django.urls import path
  from . import views
  
  urlpatterns = [
      # 其他路由...
      path('submit-table-data/', views.submit_table_data, name='submit-table-data'),
  ]
  

• 表格输入字段一定要设置name属性，最好和Django模型的字段名一致，后端处理会更顺畅
• 测试时按F12打开浏览器控制台，查看AJAX请求的状态码和返回信息，能快速定位问题
• 如果你的DataTables是服务器端渲染的，需要调整行数据的获取逻辑（上面代码针对客户端渲染场景）

内容的提问来源于stack exchange，提问作者drv