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])
    }
}

我也不十分清楚為什么要將數據封裝在此處的列表中：如果響應始終包含一個元素，則僅通過字典就更有意義了。