Angular语言 - js $ http. -post在Django不起作用

Question

我刚刚启动django以及我试图实现$ http.post方法的angular的方法，以向我的django数据库发布表单数据，我的进一步计划是更新视图以显示显示的视图没有页面刷新的结果。因此，我想在Django db中发布数据，然后我的视图功能将返回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({});
        });
    }
 }]);

我的型号： -

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
       )
   

   应该返回Card表中前15个对象的content值的列表，如果您的表单有效，则通过所提供的内容在该表中创建一个新对象。

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承诺 - 在Promise链中呼叫同步功能，您如何同步解决ES6链的承诺？以及服务工作者中的同步或顺序提取

祝你好运：(