如何通过jQuery和Ajax获取Django中外键关联的分类标题？

问题原因 #

1. 视图中使用Product.objects.values()时，默认仅返回Product模型自身的字段，外键category仅会返回关联对象的ID（键名为category_id），不会自动包含Category模型的title字段，导致前端data[i].category.title无法获取到值，显示undefined。
2. 需确认前端循环的是响应中的products数组，而非整个响应对象（如果直接循环整个响应对象，data.length会是undefined，循环逻辑也会出错）。

解决方案 #

1. 修改视图代码，获取关联分类的标题 #

在values()中通过双下划线__指定要获取的关联模型字段，可选将字段格式化为前端易访问的结构：

def MyProduct(request):
    # 获取产品及关联分类的标题字段
    allproducts = Product.objects.values(
        'id', 'title', 'category__title'
    ).order_by('-id')
    products = list(allproducts)
    
    # 可选：将字段格式化为嵌套结构，让前端可以用category.title访问
    formatted_products = []
    for product in products:
        formatted_products.append({
            'id': product['id'],
            'title': product['title'],
            'category': {
                'title': product['category__title']
            }
        })
    
    return JsonResponse({"status": "success", "products": formatted_products})

2. 修正前端Ajax代码 #

根据视图返回的字段结构，调整前端的取值方式：

• 如果使用了格式化后的嵌套结构：

// 假设Ajax成功回调中拿到响应对象response
const products = response.products;
for(let i=0; i < products.length; i++){
    $('#tblDataList tbody').append(`
        <tr>
            <td class="sn"> ${i+1} </td>
            <td class="title"> ${products[i].title} </td>
            <td class="category"> ${products[i].category.title} </td>
        </tr>
    `)
}

• 如果没有格式化，直接使用原始字段名：

const products = response.products;
for(let i=0; i < products.length; i++){
    $('#tblDataList tbody').append(`
        <tr>
            <td class="sn"> ${i+1} </td>
            <td class="title"> ${products[i].title} </td>
            <td class="category"> ${products[i].category__title} </td>
        </tr>
    `)
}

额外修正：模型代码的缩进问题 #

Category模型的__str__方法存在缩进错误，修正后才能正常使用：

class Category(models.Model):
    title= models.CharField(null=True, blank=True, max_length=200)

    def __str__(self):
        return self.title  # 此处需缩进，与def语句对齐

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