Ajax请求中外键关联的Product Name返回Undefined问题求助

问题原因 #

Django ORM的values()方法默认仅返回当前模型的字段，不会自动序列化外键关联的对象数据，所以前端拿到的response.currentorder[key].product是undefined。要获取关联产品的名称，需要在视图中明确指定外键关联的字段。

修改方案 #

1. 更新Django视图代码
   在values()中添加外键关联的产品名称字段（假设产品模型的名称字段为name，外键字段为product）：

   def getorder(request):
       currentorder = PoductOrder.objects.all()
       # 指定需要返回的字段，包括外键关联的产品名称
       return JsonResponse({"currentorder": list(currentorder.values('order_id', 'product__name'))})
   

   若想让前端字段名更友好，可使用F()表达式给字段起别名：

   from django.db.models import F
   
   def getorder(request):
       currentorder = PoductOrder.objects.all()
       return JsonResponse({
           "currentorder": list(
               currentorder.values(
                   'order_id',
                   product_name=F('product__name')  # 自定义别名product_name
               )
           )
       })
   

2. 更新前端JS代码
   根据视图返回的字段名调整前端逻辑：

   • 若使用product__name字段：

     $(document).ready( function(){
         $.ajax({
             type:'GET',
             url:"/order/getorder/",
             data:{category:$('#category').val()},
             success: function(response){
                 for (var key in response.currentorder){
                     let temp = ''
                     // 新增产品名称列
                     temp+="<tr><td>"+response.currentorder[key].order_id+"</td><td>"+response.currentorder[key].product__name+"</td></tr>";
                     console.log(response.currentorder[key].product__name);
                     $('#order-table').append(temp);
                 }
             },
         })
     })
     

   • 若使用别名product_name：

     $(document).ready( function(){
         $.ajax({
             type:'GET',
             url:"/order/getorder/",
             data:{category:$('#category').val()},
             success: function(response){
                 for (var key in response.currentorder){
                     let temp = ''
                     temp+="<tr><td>"+response.currentorder[key].order_id+"</td><td>"+response.currentorder[key].product_name+"</td></tr>";
                     console.log(response.currentorder[key].product_name);
                     $('#order-table').append(temp);
                 }
             },
         })
     })
     

注意事项 #

• 需确保产品模型中存储名称的字段名正确（比如可能是title而非name，需根据实际模型定义调整）。
• 若外键可能为null，前端要处理空值情况，避免页面渲染出错。

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