角度-js $ http.postジャンゴ

Question

で働いていない私はちょうどジャンゴを開始し、私は私のDjangoのデータベースにフォームデータをポストするために、角度の$ http.postメソッドを実装しようとしていた、そして私のさらに計画を更新することでしてきました私は、DjangoのDB内のデータを投稿すると考えられ、その後、私の見解機能は、私は$ http.getメソッドを使用してビューを更新するために使用できるデータを掲載ことのjsonresponseを返します。何refresh.soページせずに結果を表示するビュー。

しかし、問題は私がデータを投稿するたびにデータをポストして空のjsonレスポンスを返すことができないということです。

urls.py

from django.conf.urls import url 
from . import views 
app_name='demo' 
urlpatterns=[ 
    url(r'^$',views.index,name="index"), 
    url(r'^add_card/$',views.add_card,name="add_card") 

] 

views.py

from django.shortcuts import render 
from django.http import HttpResponse,JsonResponse 
from .forms import CardForm 
from .models import Card 
# Create your views here. 

def add_card(request): 
    saved = False 
    if request.method == 'POST': 
     #print('hi') 
     form = CardForm(request.POST) 
     #print('hi') 
     if form.is_valid(): 
      #print('hi') 
      card = Card() 
      #print('hi') 
      card.content = form.cleaned_data['content'] 
      #print('hi') 
      saved = True 
      card.save() 
      #print('hi') 
     return JsonResponse({'body':list(q.content for q in Card.objects.order_by('-id')[:15])}) 

    else: 
     return HttpResponse(
      json.dumps({"nothing to see": "this isn't happening"}), 
      content_type="application/json" 
     ) 

def index(request): 
    return render(request,'demo/index.html',{'form':CardForm()}) 

controller.js - ：ここで

は、私が働いている私のコードです

var nameSpace = angular.module("ajax", ['ngCookies']); 

nameSpace.controller("MyFormCtrl", ['$scope', '$http', '$cookies', 
function ($scope, $http, $cookies) { 
    $http.defaults.headers.post['Content-Type'] = 'application/json'; 
    // To send the csrf code. 
    $http.defaults.headers.post['X-CSRFToken'] = $cookies.get('csrftoken'); 

    // This function is called when the form is submitted. 
    $scope.submit = function ($event) { 
     // Prevent page reload. 
     $event.preventDefault(); 
     // Send the data. 
     var in_data = jQuery.param({'content': $scope.card.content,'csrfmiddlewaretoken': $cookies.csrftoken}); 
     $http.post('add_card/', in_data) 
      .then(function(json) { 
      // Reset the form in case of success. 
      console.log(json.data); 
      $scope.card = angular.copy({}); 
     }); 
    } 
}]); 

マイmodels.py:-

from django.db import models 

# Create your models here. 
class Card(models.Model): 
    content = models.TextField() 
    date = models.DateTimeField(auto_now_add=True) 
    def __str__(self): 
     return self.content 

マイforms.py-

from django import forms 
from .models import Card 

class CardForm(forms.ModelForm): 
    class Meta: 
     model = Card 
     fields = ['content'] 

Answer 1

あなたはview.pyコード内のいくつかの問題を持っています。

1. あなたが要求データ
あなたが応答として、新しいデータを返す必要が

2. からデータベースに新しいオブジェクトを作成する必要がcontent値のリストを返す必要があります

   if form.is_valid(): 
       new_content = form.cleaned_data['content'] 
       card = Card.objects.create(content=new_content) 
       return JsonResponse(
         list(Card.objects.all().order_by('-id').values('content')[:15]), 
         safe=False 
       ) 
   

   あなたのフォームが有効な場合は、提供されたコンテンツによってそのテーブルに新しいオブジェクトを作成した後に、Cardテーブルの最初の15個のオブジェクトのうちの1つを削除します。また、あなたのCardFormは次のように定義されなければならない

3. は次のとおりです。

   class CardForm(forms.ModelForm): 
       class Meta: 
        model = Card 
        fields = ('content',) 
   

最後に

4. 、あなたの$http.post呼び出しが.thenに達したときに、確率（ほぼ確実）ことがあることを意味し、非同期であります投稿のリクエストがまだ解決されていないため、json.dataは空です。

   $http.post('add_card/', in_data) 
       .then((json) => { 
        // Reset the form in case of success. 
        console.log(json.data); 
        $scope.card = angular.copy({}); 
   }); 
   

   Aはるかに優れた読みと非同期ツー同期呼び出しの解決策は次のとおりです：この問題を解決するためES6 Promises - Calling synchronous functions within promise chain、How do you synchronously resolve a chain of es6 promises?とSynchronous or Sequential fetch in Service Worker

幸運:)