Ajaxを使用してDjangoからReactにモデルのクエリセットを送信します。

Question

これについての情報を数時間ずっと探しています。私はReactを使ってページをレンダリングしています.Djangoモデルのリストを表示したいと思います。私はajaxを使ってモデルのリストを取得しようとしていますが、成功することはありません。私は私の見解では、次のコードを使用するときに、私は、JSONの背後にある概念を理解してわからない

はので：

唯一の私が（マップ反応できない文字列を返すように思わ

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

はマップがあると言います返されたオブジェクトで呼び出すときは関数ではありません）。当面 ：私はマップがJSONオブジェクトを通過し、json.dumpsは1を作成すると仮定していることを意図していたと思った...

は（私は単なる文字列であると信じる）JSON「オブジェクト」を返さノーカテゴリで一つのテストモデルとコンテンツ「少なくとも1つのノート」

[[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"); 
     } 
    }); 

誰かがジャンゴからモデルを送信するために最善の方法を私にポイントしてくださいすることができ反応するフロントエンドでこのモデルのデータを使用できますか？

Answer 1

Django REST Frameworkを使用して、Djangoをあなたのリアクションフロントエンドに接続することをお勧めします。 DRFの使用パターンは次のとおりです。

1. モデルのシリアライザを定義します。これらは、フロントエンドに送信するJSONifiedオブジェクトにどのフィールドが含まれるかを定義します。あなたの場合は、フィールド 'categories'と 'content'を指定することができます。
2. APIエンドポイントを作成します。これは、オブジェクト/モデルにアクセスするための反応からのリクエストを発行するURLです。
3. Reactから、GET要求を発行して（フィルタリングされた可能性のある）オブジェクトのセットを取得します。 ReactフロントエンドからPOST要求を受け取ったときに、他のエンドポイントを設定してオブジェクトを変更または作成することもできます。

GETリクエストの成功関数では、シリアライザで設定したフィールドを持つオブジェクトの配列を受け取ります。あなたの例では、フィールド 'categories'と 'content'を持つオブジェクトを含む長さ1の配列を受け取ります。したがってxhr[0].contentの値は"At least one note "になります。

コードでは、JsonResponse関数内のjson.dumpsの呼び出しは冗長です。 JsonResponseを使用してリストをシリアライズする例については、the docsを参照してください。手動でオブジェクトをシリアライズする場合（推奨しません）、リストではなく辞書を使用します（{'categories': <value>, 'content' : <value>}など）。 DRFはこのようにオブジェクトをシリアル化します。したがって、フィールドはフロントエンドでアクセスして解釈しやすくなります。