在站点范围内添加一个或多个表单并使用 Ajax 提交答案

【问题标题】：Add one or multiple forms sitewide and submit using Ajax在站点范围内添加一个或多个表单并使用 Ajax 提交
【发布时间】：2019-04-14 22:27:30
【问题描述】：

我有一种在页脚中显示站点范围的表单。我使用 Ajax 提交此表单。

在某些页面上还可以存在其他形式。

通常我使用 CBV 进行创建和更新。

class CreateItem(CreateView):
    model = Item
    form_class = ItemForm

   <form action="" method="post">
        {% csrf_token %}
        {{ form.name }}

在这种情况下，我不能使用上述方法。对于提交的看法，我有：

class FooterAddView(View):

    def post(self, request):
        if request.is_ajax():
          .....

我需要一些关于 Ajax 令牌的帮助，并在整个站点范围内加载/传递表单。

【问题讨论】：

很抱歉，我之前忘记为视图类定义 form_class 和模板，我通常使用基于函数的视图来解决这些视图，而这些视图不需要这些。所以我更新了我的答案，在我的答案中修复了这些小问题。

标签： ajax django django-forms

【解决方案1】：

视图类中的 post()（现在我也使用 get() 更新了它）基本上如下所示：

from django.http import HttpResponseRedirect
from django.template.loader import get_template
from django.shortcuts import render
from django.views import View
from django.http import JsonResponse

from .forms import ItemForm

class FooterAddView(View):

    form_class = ItemForm
    # initial = {'key': 'value'}
    template_name = 'myformtemplate.html'

    def get(self, request, *args, **kwargs):
        form = self.form_class() # you can pass the initials here too
        return render(request, self.template_name, {'form2': form})

    def post(self, request, *args, **kwargs):
        if request.is_ajax():
            form = self.form_class(request.POST)
            if form.is_valid():
                # <process form cleaned data>
                data = form.cleaned_data

                # then save
                form.save()
                return JsonResponse(data)
                # or return HttpResponseRedirect('/success/')                    
            else:
                form = self.form_class()
                print(form.errors)
                # return form.errors

        form = self.form_class()
        return render(request, self.template_name, {'form2': form})

您将在视图（和表单）的模板文件中提供 csrf 令牌，如下所示：

templates/myformtemplate.html

<form action="#" method="post">
    {% csrf_token %}
    {{ form2 }}
    <input type="submit" value="Submit">
</form>

我希望这对您的项目有所帮助。

关于表单标记：该标记将在表单提交时自动包含在 ajax 调用中（数据：$('form').serialize(),）。一页上的更多表单也不会真正导致这个问题的问题。

现在，我并没有真正理解您问题的第二部分，即首先使用创建的“站点范围”表单。然后我不得不明白你可能还没有深入研究 Django 的模板系统，这就是你问这个问题的原因。

因此，在您网站的页脚应用此视图（使用表单和模板）：

在您的应用程序 templates 文件夹中（您必须创建它）：

1.你有一个base.html，它是可扩展的（也可以是包含的模板) 在基本模板中使用如下模板标签：

<body>
{% block content %} {% endblock content %}
{% block footer %}{% include "myformtemplate.html" %}{% endblock footer %}
</body>

您在每个页面使用您的内容模板扩展此 base.html 模板。

2.您将在基本模板的页脚块中包含为表单创建的模板

喜欢myformtemplate.html中的这个简单的表单模板：

<div>
<form action="#" method="post">
    {% csrf_token %}
    {{ form2 }}    
    <button type="button" name="myformbutton" id="myform2">Submit me</button>
</form>
</div> 

<script>
var $j = jQuery.noConflict();
$j( document ).ready(function() {
    $j('#myform2').on('click', function (e){
        e.preventDefault();
        $j.ajax({
            type: 'POST',
            url:'/newitem/', // the url that is defined in urls.py for the FooterAddView
            data: $j('form').serialize(),
            success: function(){
                alert('created');
            },
            error: function(response){
                alert('not submitted');
                console.log(response);
            }
        })
    })
});
</script>

这样，您的模板（带有上述视图和表单）将出现在您网站页脚部分的每个网站上。

重要提示：为了让您的表单在包含表单模板的另一个视图中呈现，您也应该在该特定视图中定义表单（例如：form = ItemForm 并在渲染部分 {'form2': form}。例如，如果您在同一页面/视图上有多个表单，则应使用“form2”。并且您的表单可以在任何页面中呈现在网站上。否则，您可以在表单模板中创建自己的 HTML 表单（而不是 Django 呈现的 html 表单），然后您可以通过 AJAX 从您网站上的任何位置将该表单提交到目标视图。我希望您能遵循这个概念这个。

希望我在您的这部分问题上没有误解您，而这正是您想问的。如果您对如何在“站点范围内”包含视图和模板有更多疑问，那么您需要进一步研究 Django 模板系统，即。在这里（小视图/模板包含和不包含的地方真的有无限的可能性）： https://docs.djangoproject.com/en/2.1/ref/templates/builtins/

【讨论】：