我是 Django 新手，我正在尝试弄清楚如何在模态中提交表单。我有两个 Django 应用程序有问题，前端和登录。前端应用程序提供页面，并且登录应该处理表单。我正在使用脆皮表单来呈现表单，但无法提交表单。几天来一直在为此苦苦挣扎。读了很多关于这方面的帖子，仍然无法弄清楚。任何帮助将不胜感激。太感谢了。我使用的是 Django 1.6 版本
前端应用程序的 urls.py：
from django.conf.urls import patterns, url
from django.contrib import admin
from frontend import views
from login.views import registration
urlpatterns = patterns('',
url(r'^$', views.index, name='index'),
url(r'^about/$', views.about, name='about'),
url(r'^contact/$', views.contact, name='contact'),
url(r'^$', 'index', name='index'),
url(r'^$',views.registration, name='register'),
)
前端应用程序的views.py：
from django.template import RequestContext
from django.shortcuts import render_to_response
from login.forms import RegistrationForm
from login.forms import LoginForm
from login.views import registration
def index(request):
return render_to_response('index.html', {'regform':RegistrationForm(),'loginform': LoginForm()} )
def about(request):
return render_to_response('about.html')
def contact(request):
return render_to_response('contact.html')
登录应用程序的 urls.py:
from django.conf.urls import patterns, url
from login import views
urlpatterns = patterns('',
url(r'^register/$', views.registration, name='index.html')
)
登录应用程序的views.py：
from django.template import RequestContext
from django.shortcuts import render_to_response
from login.forms import RegistrationForm
def registration(request):
context = RequestContext(request)
registered = False
if request.method == 'POST':
user_form = RegistrationForm(request.POST)
user = user_form.save()
user.set_password(user.password)
user.save()
registered = True
else:
user_form = RegistrationForm()
return render_to_response('index.html', {'regform': user_form}, context)
def login(request):
context = RequestContext(request)
login_form = LoginForm()
return render_to_response('index.html', {loginform: login_form}, context)
登录应用程序的forms.py：
from django.contrib.auth.models import User
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Field
from crispy_forms.bootstrap import (PrependedText, PrependedAppendedText, FormActions)
from login.models import User
class RegistrationForm(forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput())
class Meta:
model = User
fields = ('username', 'email', 'first_name','last_name','password')
helper = FormHelper()
helper.form_method = 'POST'
helper.add_input(Submit('save', 'save', css_class='btn-primary'))
class LoginForm(forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput())
class Meta:
model = User
fields = ('username', 'password')
@property
def helper(self):
helper = FormHelper()
helper.form_method = 'POST'
helper.add_input(Submit('save', 'save', css_class='btn-primary'))
return helper
Index.html 模态：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Register </h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Login</a></li>
<li><a href="#tab2" data-toggle="tab">Register</a></li>
</ul>
<form action="" method=post">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
{% crispy loginform %}
</div>
<div class="tab-pane" id="tab2">
{% crispy regform %}
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
模态与 Ajax 尝试（截图）：
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="register" type="button" class="btn btn-primary">Submit</button>
<script>
$('#register').click(function(){
console.log('am i called');
$.ajax({
type: "POST",
url: "/register/",
dataType: "json",
data: $("#login").serialize(),
success: function(data) {
alert(data.message);
}
});
});
</script>
Ajax 请求的登录视图：
def addUser(request):
if request.is_ajax() and request.POST:
data = {request.POST.get('item')}
return HttpResponse(json.dumps(data), content_type='application/json')
else:
raise Http404
根据请求呈现的模态 HTML：
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Register </h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Login</a></li>
<li><a href="#tab2" data-toggle="tab">Register</a></li>
</ul>
<form id="login" action="/frontend/register/" method="POST">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Username* Required. 30 characters or fewer. Letters, numbers and @/./+/-/_ characters
