Django中如何在jQuery里获取JsonResponse返回的字典数据？

别担心，我来帮你搞定这个问题！首先咱们先理清楚你现有的代码，然后一步步修改来获取Django返回的JSON数据。

你的现有代码 #

jQuery代码 #

$('#id_buysell').on('change', function(){ 
    console.log("buysell"); 
    var $id_buysell = $('#id_buysell').val(); 
    console.log($id_buysell); 
    $.ajax({ 
        method: "GET", 
        url: "/myportfolio/add_transaction", 
        data: { buysell: $id_buysell } 
    }); 
}); 

Django视图代码 #

def add_transaction(request): 
    if request.method == "GET": 
        if request.is_ajax(): 
            print("ajax test") 
            #print(request.GET.get) 
            print(request.GET.get('coin')) 
            print(request.GET.get('buysell')) 
            data = { 
                'view_buysell': request.GET.get('buysell'), 
                'view_coin': request.GET.get('coin') 
            } 
            form = TransactionForm(user = request.user, coin_price = GetCoin("Bitcoin").price) 
            return JsonResponse(data) 

解决方法：获取JsonResponse返回的数据 #

你当前的AJAX请求只完成了发送数据的步骤，但没有处理后端返回的响应。要拿到Django返回的字典，需要在$.ajax配置中添加回调函数来接收并解析响应数据，下面是两种常用的实现方式：

方式1：使用success回调（传统写法） #

直接在$.ajax的配置对象里新增success函数，后端返回的JSON会自动被解析成JavaScript对象，你可以直接访问里面的字段：

$('#id_buysell').on('change', function(){ 
    console.log("buysell"); 
    var $id_buysell = $('#id_buysell').val(); 
    console.log($id_buysell); 
    $.ajax({ 
        method: "GET", 
        url: "/myportfolio/add_transaction", 
        data: { buysell: $id_buysell },
        // 新增成功回调，接收后端返回的数据
        success: function(response) {
            // response就是Django返回的字典转成的JS对象
            console.log("后端返回的完整数据：", response);
            // 直接访问字典里的字段
            console.log("view_buysell的值：", response.view_buysell);
            console.log("view_coin的值：", response.view_coin);
            
            // 这里可以把数据渲染到页面上，比如更新某个元素内容
            // $('#target-element').text(response.view_buysell);
        },
        // 可选：添加失败回调，处理请求出错的情况
        error: function(xhr, status, error) {
            console.error("AJAX请求出错：", error);
        }
    }); 
}); 

方式2：使用done方法（Promise风格，更推荐） #

jQuery的AJAX请求会返回一个Deferred对象，你可以用done绑定成功回调，写法更灵活，也方便链式处理：

$('#id_buysell').on('change', function(){ 
    console.log("buysell"); 
    var $id_buysell = $('#id_buysell').val(); 
    console.log($id_buysell); 
    $.ajax({ 
        method: "GET", 
        url: "/myportfolio/add_transaction", 
        data: { buysell: $id_buysell } 
    })
    .done(function(response) {
        // 成功拿到响应数据
        console.log("后端返回的完整数据：", response);
        console.log("view_buysell:", response.view_buysell);
        console.log("view_coin:", response.view_coin);
    })
    .fail(function(xhr, status, error) {
        // 请求失败时的处理逻辑
        console.error("请求失败：", error);
    }); 
}); 

额外注意事项 #

1. 替换废弃的request.is_ajax()：在Django 3.1及以后版本中，request.is_ajax()已经被废弃，建议改用请求头判断是否为AJAX请求，修改你的视图代码：

def add_transaction(request): 
    if request.method == "GET": 
        # 替换原有的is_ajax()判断
        if request.headers.get('X-Requested-With') == 'XMLHttpRequest': 
            print("ajax test") 
            print(request.GET.get('coin')) 
            print(request.GET.get('buysell')) 
            data = { 
                'view_buysell': request.GET.get('buysell'), 
                'view_coin': request.GET.get('coin') 
            } 
            form = TransactionForm(user = request.user, coin_price = GetCoin("Bitcoin").price) 
            return JsonResponse(data) 

2. 补充缺失的参数：你当前的AJAX请求只传递了buysell参数，没有传coin，所以视图里request.GET.get('coin')会返回None，如果需要这个参数，记得在data里补充对应的键值对。

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