Django / Ajax / Javasdript JSON.parse将字符串转换为JavaScript对象

Question

我正在使用Ajax从服务器发送获取请求，我正在从产品模型中查询并获取特定产品，我想以JavaScript对象的形式返回结果，但是当我尝试访问第一个值时它返回此'{'来自responseText [0]。 我如何将返回的数据转换为js对象。 这是我的代码

views.py

def edit_product(request):
    product_id = request.GET.get('product_id')
    print('THIS IS PRODUCT ID ', product_id)
    product = Product.objects.get(pk=product_id)
    data = [
    {
        'name':product.name,
        'brand':product.brand,
        'price':product.price,
        'description':product.description 

    }
]
return HttpResponse(data)

ajax.js

function getProductEditId(product_id){
            //alert(id)

document.getElementById('gridSystemModalLabel').innerHTML='<b> Edit product </b>';
            //change modal header from Add product to  Edit product
            var request = new XMLHttpRequest();
            request.open('GET', '/edit_product/?product_id=' + product_id, true);
            request.onload = function(){
                console.log('hello world', product_id)
                //var data = request.responseText
                var data = JSON.parse(JSON.stringify(request.responseText));
                console.log(data[0])

            }
            request.send();

        }

Answer 1

HTTP响应不能包含字典，您可以通过特定格式（例如JSON）传递数据。 Django通过JsonResponse [Django-doc]提供了一些便利：

from django.http import JsonResponse

def edit_product(request):
    product_id = request.GET.get('product_id')
    print('THIS IS PRODUCT ID ', product_id)
    product = Product.objects.get(pk=product_id)
    data = [
        {
            'name':product.name,
            'brand':product.brand,
            'price':product.price,
            'description':product.description 
        }
    ]
    return JsonResponse(data, safe=False)

但是如代码所示，这并不安全，因为根级别的数组是著名的JSON劫持漏洞 。

通常最好只传递一个字典（这样就没有列表），然后可以删除safe=False参数。 尽管然后假设所有安全漏洞已荡然无存并不是真正的“安全”。

另外，您可以使用json.dumps [Python-doc] （这或多或少是JsonResponse在内部执行的操作），但是这样您可能会以重复的代码结尾。

在JavaScript端，您只需要将JSON Blob 解析为JavaScript对象：

//change modal header from Add product to  Edit product
var request = new XMLHttpRequest();
request.open('GET', '/edit_product/?product_id=' + product_id, true);
request.onreadystatechange = function() {
    console.log('hello world', product_id)
    if(this.status == 200 && this.readyState == 4) {
        var data = JSON.parse(this.responseText);
        console.log(data[0])
    }
}

我也不十分清楚为什么要将数据封装在此处的列表中：如果响应始终包含一个元素，则仅通过字典就更有意义了。