如何通过Ajax/JSON将JS复选框数组传递至Django视图并转为Python数组

我来帮你搞定这个问题，先梳理下你代码里的几个问题，然后给出修正后的完整方案，让你能顺利把前端选中的数组传到Django后端并打印出来。

你的问题现状 #

你现在想把前端选中的货币项数组（curCheck）通过Ajax发送到Django视图，转成Python数组打印，但遇到了AttributeError: 'str' object has no attribute 'read'的错误，同时还有几个隐藏的小问题比如请求重复发送、函数名不匹配等。

错误原因分析 #

那个read()的错误很直接：你已经把request.body解码成了字符串body_unicode，但还试图调用只有文件对象才有的.read()方法，这肯定会报错。另外你当前的代码每次选中一个项就发一次请求，这不是最优的，应该把所有选中项收集成数组一次性发送；还有Ajax函数名和调用的名字不匹配（你调用的是postcurChecked，但定义的是postsubChecked）。

修正后的完整代码 #

1. 前端JavaScript代码（收集选中项并发送）

document.getElementById('results').addEventListener('click', function(){
    let html_table = '<thead><tr><th>Currency</th><th>Amount</th><th>Symbol</th></tr></thead>';
    let checkElements = document.getElementsByClassName('ch');
    let curChecked = []; // 初始化数组，收集所有选中的货币项
    
    for(let i = 0; i < curname.length; i++){
        if (checkElements[i].checked) {
            curChecked.push(curname[i]); // 将选中的货币名加入数组
            html_table += '<tr><td>' + curname[i] + '</td><td></td><td></td></tr>'; // 补全表格行的所有单元格，避免结构错误
        }
    }
    
    postcurChecked(curChecked); // 一次性发送整个选中数组
    document.getElementById('result_table').innerHTML = html_table;
}, false);

2. 修正后的Ajax函数

function postcurChecked(curChecked) { // 修正函数名，和调用保持一致
    $.ajax({
        url: "http://127.0.0.1:8000/results/",
        type: "POST",
        data: JSON.stringify({"checkbox": curChecked}), // 将数组转成标准JSON字符串
        contentType: "application/json", // 必须指定内容类型，后端才能正确识别JSON
        headers: { 'X-CSRFToken': getCookie('csrftoken')}
    });
}

3. Django视图代码（接收并解析JSON）

import json
from django.http import JsonResponse

def currencyChecked(request):
    if request.method == 'POST':
        # 解码request.body为字符串，然后解析成JSON对象
        body_unicode = request.body.decode('utf-8')
        json_data = json.loads(body_unicode)
        
        # 获取传递过来的数组，默认值为空数组避免键不存在报错
        cur_check_array = json_data.get('checkbox', [])
        print(cur_check_array) # 这里就能打印出Python格式的数组了
        
        # 返回成功响应给前端（可选，但建议加上）
        return JsonResponse({"status": "success", "received_data": cur_check_array})
    
    # 处理非POST请求的情况
    return JsonResponse({"status": "error", "message": "Only POST requests are allowed"}, status=405)

关键修改说明 #

• 前端侧：
  • 把所有选中项收集到一个数组，一次性发送请求，避免多次重复请求后端
  • 修正了Ajax函数名不匹配的问题
  • 发送数据时用JSON.stringify转成标准JSON字符串，并指定contentType: "application/json"，确保后端能正确识别数据格式
• 后端侧：
  • 移除了多余的replace('%22','')操作，现在接收的是标准JSON，不需要额外处理
  • 去掉了错误的.read()调用，直接用json.loads()解析已解码的字符串
  • 添加了请求方法判断，确保只处理POST请求，同时返回合适的JSON响应
  • 用get()方法获取数组，避免因键不存在导致的报错

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