带有 AJAX 的 Django CreateView答案

【问题标题】：Django CreateView with AJAX带有 AJAX 的 Django CreateView
【发布时间】：2018-07-23 03:43:37
【问题描述】：

我想在 Django 中使用 AJAX 通过通用视图和模式创建、更新和删除对象。 Django的官方文档讲了AjaxableResponseMixin并展示了这段代码：

from django.http import JsonResponse
from django.views.generic.edit import CreateView
from myapp.models import Author

class AjaxableResponseMixin:
    """
    Mixin to add AJAX support to a form.
    Must be used with an object-based FormView (e.g. CreateView)
    """
    def form_invalid(self, form):
        response = super().form_invalid(form)
        if self.request.is_ajax():
            return JsonResponse(form.errors, status=400)
        else:
            return response

    def form_valid(self, form):
        # We make sure to call the parent's form_valid() method because
        # it might do some processing (in the case of CreateView, it will
        # call form.save() for example).
        response = super().form_valid(form)
        if self.request.is_ajax():
            data = {
                'pk': self.object.pk,
            }
            return JsonResponse(data)
        else:
            return response

class AuthorCreate(AjaxableResponseMixin, CreateView):
    model = Author
    fields = ['name']

（我有一个看起来像这样的模型）但是我不明白如何在模态中实现它。我确实有我目前正在使用的这个表单，但它是一个网页，而不是一个模式：

  <form method="post" novalidate>
    {% csrf_token %}
    {% include 'includes/form.html' %}
    <button type="submit" class="btn btn-success">AJouter</button>
  </form>

有没有一种简单的方法可以使用一些 ajax 和 jquery 在模态中实现它？

【问题讨论】：

你可以试试这个stackoverflow.com/q/60065513/7563953

标签： jquery ajax django

【解决方案1】：

我使用 fetch 而不是 Ajax。这个使用承诺在新的 ES6 中来自 javascript。这是我的代码

async function saveMateriaPrima(event) {
  console.log('Guardando producto');

  event.preventDefault();
  let dataForm = new FormData(formMatPrima)
  let url = formMatPrima.action

  fetch(url, {
    method: 'POST',
    body: dataForm
  })
  .then(function(response){
    console.log(response);

    if(response.ok){
      let producto = document.getElementById('id_nombre').value
      console.log(`${producto} guardado correctamente.`);

      document.getElementById('id_nombre').value = ''
      $('#modal-crearmateriaprima').modal('hide')

    }else{
      throw "Error en la llamada Fetch"
    }
  })
  .catch(function(err){
    console.log(err);    
  })
}

它适用于您的代码，但我无法获得新对象的 pk。希望对您有所帮助，并可以改进此代码以获取 pk 数据。

【讨论】：