角-js $ http.post在Django不工作

Question

我剛開始Django和我試圖實現$ http.post角法形成數據發佈到我的Django的數據庫，我的進一步計劃是更新視圖顯示結果沒有頁面refresh.so我想在django數據庫中發佈數據，然後我的視圖函數將返回一個jsonresponse，發佈的數據，我可以使用$ http.get方法更新視圖。

但問題是我存在的就是每當我張貼的數據是無法發佈數據並返回一個空的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. 您需要作爲響應返回新的數據在數據庫中創建一個新的對象

   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 
       ) 
   

   這應該返回content值的列表如果您的表單有效，請在您的Card表中按照提供的內容在該表格中創建一個新對象之後，將其中前15個對象中的所有對象刪除。

3. 而且您CardForm應該被定義如下：

   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({}); 
   }); 
   

   一個更好的閱讀和對異步到同步調用的解決方案是：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

祝你好運:)