使用Ajax從Django發送模型的查詢集到React

我一直在尋找有關這個小時的信息沒有任何結果。我正在使用React渲染一個頁面，我希望它顯示一個Django模型列表。我正嘗試使用ajax來獲取模型列表，但沒有任何成功。使用Ajax從Django發送模型的查詢集到React

我不知道我理解其背後的JSON的概念，因爲當我在我看來，使用下面的代碼：

data = list(my_query_set.values_list('categories', 'content')) 
return JsonResponse(json.dumps(data, cls=DjangoJSONEncoder), safe=False)

這似乎只返回我不能映射（反應的字符串表示，地圖當我在返回的對象上調用它時不是函數）。我認爲地圖是通過一個JSon對象，並認爲json.dumps是想創建一個...

返回JSon「對象」（我相信只是一個字符串）： 暫時我有沒有類別和內容「至少一個註釋」

[[null, "At least one note "]]

陣營代碼只有一個測試模型：

$.ajax({ 
     type:"POST", 
     url: "", 
     data: data, 
     success: function (xhr, ajaxOptions, thrownError) { 

      var mapped = xhr.map(function(note){ 
       return(
        <p> 
         {note.categories} 
         {note.content} 
        </p> 
       ) 
      }) 

      _this.setState({notes: mapped}) 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert("failed"); 
     } 
    });

可有人請點我從Django的發送模式的最佳途徑到React，如此我可以在我的前端使用這個模型的數據嗎？

來源

2016-04-26 Ryan Pergent

我建議使用Django REST Framework將Django連接到您的React前端。 DRF的使用模式爲：

爲您的模型定義串行器。這些定義了將發送到前端的JSON化對象中包含的字段。在你的情況下，你可以指定字段的「類別」和「內容」。
創建一個API端點。這是您將從React發出請求以訪問對象/模型的URL。
從React中，發出GET請求以檢索（可能已過濾的）對象集合。您還可以在收到來自React前端的POST請求時設置其他端點來修改或創建對象。

在GET請求的成功函數中，您將收到一個包含您在序列化程序中設置的字段的對象數組。在您的示例中，您將收到一個長度爲1的數組，其中包含具有字段「類別」和「內容」的對象。所以xhr[0].content將有價值"At least one note "。

在您的代碼中，JsonResponse函數中對json.dumps的調用是多餘的。有關使用JsonResponse序列化列表的示例，請參閱the docs。如果你是手動序列化對象（我不推薦），我會使用字典而不是列表 - 例如{'categories': <value>, 'content' : <value>}。 DRF會像這樣爲您序列化對象，因此這些字段在前端更容易訪問和解釋。

來源

2016-04-26 23:31:43

感謝您的回覆。你有沒有創建一個API端點來獲取表單數據並向用戶顯示一個空白表單來填充的例子？我一直在這裏要求：http://stackoverflow.com/questions/42297614/django-forms-with-reactjs – Anupam

使用Ajax從Django發送模型的查詢集到React

回答

相關問題