Bootstrap 模式形式的 AJAX 实现（在 Django 上）

Question

我想让我的模式引导表单在提交按钮被触发时与 AJAX 一起工作。如果我可以推送提交并保留在模式表单页面上，那就太好了，无论是注册成功（在这种情况下，会给出感谢信息）或发生某种错误（在这种情况下，parsleyfy 会处理它)。
这些是我的文件。

-views.py

from django.shortcuts import render_to_response, render, redirect
from django.template import RequestContext
from django.http import HttpResponseRedirect, HttpResponse
from django.core.urlresolvers import reverse
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required

from tentagarden.forms import UserForm, UserProfileForm

def home(request):
    context = RequestContext(request)

    registered = False

    if request.method == 'POST':
        user_form = UserForm(data=request.POST)
        profile_form = UserProfileForm(data=request.POST)

        if user_form.is_valid() and profile_form.is_valid():
            user = user_form.save()

            user.set_password(user.password)
            user.save()

            profile = profile_form.save(commit=False)
            profile.user = user

            if 'picture' in request.FILES:
                profile.picture = request.FILES['picture']

            profile.save()

            registered = True

        else:
            print user_form.errors, profile_form.errors

    else:
        user_form = UserForm()
        profile_form = UserProfileForm()

    return render_to_response(
            'tentagarden/home.html',
            {'user_form': user_form, 'profile_form': profile_form, 'registered': registered},
            context)

-home.html

{% extends "tentagarden/base.html" %}
{% load static %}

{% block content %}

<div class="panel-body">
    <h1 id="home">Pack up your bag and go!</h1>

    {% if user.is_authenticated %}
    <h2>Welcome back, {{ user.username }}. Let's explore the World together!</h2>
    {% else %}

  <!-- Trigger the modal with a button -->
  <h2><a id="myBtn">Subscribe now :)</a></h2>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title">Register with Tent a garden</h3>
        </div>
        <div class="modal-body">
        {% if registered %}

            <h4>Tent a garden says: <strong>thank you for registering!</strong></h4>
            <a href="/">Return to the homepage.</a><br />
            {% else %}

            <form data-parsley-validate id="user_form" method="post" action="" enctype="multipart/form-data">

                {% csrf_token %}

                {{ user_form.as_p }}
                {{ profile_form.as_p }}

                <input type="submit" id="submit" class="btn btn-info" name="submit" value="Register" />
            </form>
        {% endif %}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>

    </div>
    </div>
    </div>

    <script>
        $(document).ready(function(){
            $("#myBtn").click(function(){
                $("#myModal").modal();
            });
        });
    </script>

    <h2>Are you already a member? Then, <a href="/login/">login</a>!</h2>
    {% endif %}
</div>

{% endblock %}

-forms.py

from django import forms
from django.forms import ModelForm
from tentagarden.models import UserProfile
from django.contrib.auth.models import User
from parsley.decorators import parsleyfy

@parsleyfy
class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput())
    first_name = forms.CharField(required=True)
    last_name = forms.CharField(required=True)
    email = forms.CharField(required=True)

    class Meta:
        model = User
        fields = ('username', 'first_name', 'last_name', 'email', 'password')

class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ('website', 'picture')

我能做什么？ 非常感谢！

Answer 1

要使用 ajax 提交此表单，您需要先覆盖提交按钮的默认操作。有几种方法可以做到这一点，但这样的事情应该可以工作：

// With your other jQuery, or in some other script
$(document).ready(function(){

    // On form submit, do ajax instead
    $("#user_form").submit(function(e){
        var postUrl = $(this).attr('action')
        var postData = $(this).serialize()
        $.post(postUrl, postData).done(function(data){

            // Did the registration work?
            // As one idea, your you can set your view to return a JSON 
            // object with a 'success' property that you can check here

            if (data.success == 'true'){
              // print "success" on the html somewhere
              console.log('it worked!');
            }
        });
        e.preventDefault(); // This stops page reload
    });
});

然后您只需将视图 POST 设置为返回 JSON 消息，如下所示：

# At the top of the view
import json
from django.http import HttpResponse

def home(request):
    # ...
    if request.method == 'POST':
        # ...
        if user_form.is_valid() and profile_form.is_valid():
            # ...
            response_data = {}
            response_data['success'] = 'true'
            return HttpResponse(json.dumps(response_data), content_type="application/json")

    # ... The GET and other response return

这有意义吗？