如何将Django表单与Ajax集成？

Question

我已经看过很多教程，如何将ajax与django形式集成在一起，但是都非常复杂。 我有一个带有Signup表单的Signup模型和一个类似以下的视图。 models.py

from django.db import models

class SignUp(models.Model):
    name = models.CharField(max_length=120, blank=True, null=True)
    email = models.EmailField()

    def __unicode__(self):
        return self.email

和forms.py

from django import forms
from .models import SignUp

class SignUpForm(forms.ModelForm):
    class Meta:
        model = SignUp
        fields = ['name', 'email']

    def clean_name(self):
        name = self.cleaned_data.get('name')
        return name 

    def clean_email(self):
        email = self.cleaned_data.get('email')

        try:
            match = SignUp.objects.get(email=email)
        except SignUp.DoesNotExist:
            return email

        raise forms.ValidationError('This email address is already subscribed.')

views.py

from django.shortcuts import render
from django.core.mail import send_mail
from django.conf import settings 

from .forms import SignUpForm

def index(request):
    form = SignUpForm(request.POST or None)

    if form.is_valid():
        name = form.clean_name()
        email = form.clean_email()
        instance = form.save()

        subject = 'Bruke Church news'
        from_email = settings.EMAIL_HOST_USER
        to_email = [email]
        contact_message = "%s:Thank you for signing up for our newsletter via %s. we'll be in touch" %( 
                                        name,
                                         email)

        send_mail (subject, 
                            contact_message, 
                            from_email, 
                            to_email,
                            fail_silently=False)
    context = {
        "form": form
    }
    return render(request, "index.html",context)

和我的HTML形式看起来像这样

<form action="" method="POST">
                  {% csrf_token %}
                  {{form|crispy}}
                  <input type="submit" value="Sign up" class="btn btn-primary">
                </form>

这段代码运行良好，但是可以加载整个页面，我只想加载表单。 谷歌搜索之后，我发现了Ajax的概念，但是这样做确实有问题。 请帮助我， 谢谢

Answer 1

按钮上的Ajax Post示例单击提交

该方法需要运行

把它放在你的HTML中

function AddData(){
    var name = $("#name").val();
    var email = $("#email").val();

    // You should extract each and every id from your form fields


    var signupData = { name:name, csrfmiddlewaretoken: '{{ csrf_token }}',email:email};
    $.ajax({
                type: "POST",
                url: "../../index/",
                data: signupData,
                success: function(data) {
                                        alert("You Have Sucessfully Signed Up ");

                                                                    },
                                        statusCode: {
                                                      500: function() { 
                                                                        alert("You Have Already Signed Up ");
                                                                       }
                                                      },
                                    })
    }

在您的Views.py中

def index(request): 
    if request.method == 'POST': # From Frontend we are getting the data in a POST method and we are checking if front end is giving POST Method or not 
        get_email = request.POST.get('email') # Taking The DATA from front end in form of POST to Django  USER EMAIL ADDRESS
        get_name = request.POST.get('name')# Taking The DATA from front end in form of POST to Django NAME
        queryset_list = SignUp.objects.all().values_list("email",flat=True)# Performing a Django Query and getting all Signup Email Address
        if get_email in queryset_list:
           return HttpResponse(status=500)
        else:
           SignUp.objects.create(name=get_name,email=get_email)
    return HttpResponse('')