在bootstrap弹出窗口中的Django登录表单

Question

使用django 1.5 + twitter bootstrap。

在每个页面上都有一个弹出式下拉列表（bootstrap）登录表单。 使用正确的凭据进行身份验证工作正常。 现在，我的问题 - 需要在同一页面上的错误凭据上添加错误消息，而无需重新加载页面。它可以是模态窗口，或者更好，如果它只是同一弹出窗口中的文本。不知道如何做到这一点，没有重定向/重新加载。

一些代码：

views.py：

def LoginRequest(request):
    if request.user.is_authenticated():
        return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/'))
    if request.method == 'POST':
        form = LoginForm(request.POST)
        if form.is_valid():
            email = form.cleaned_data['email']
            password = form.cleaned_data['password']
            user = authenticate(email=email, password=password)
            if user is not None:
                login(request, user)
                return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/'))
            else:
                return render_to_response('/', {'form': form}, context_instance=RequestContext(request))
        else:
            return render_to_response('/', {'form': form}, context_instance=RequestContext(request))
    else:
        form = LoginForm()
        return render_to_response('/', {'form': form}, context_instance=RequestContext(request))

urls.py：

urlpatterns = patterns(
    'accounts.views',
    url(r'^signup/$', 'AccountRegistration'),
    url(r'^login/$', 'LoginRequest'),
    url(r'^logout/$', 'LogoutRequest'),
)

forms.py：

class LoginForm(forms.Form):
        email = forms.CharField(label=(u'Email'), max_length=30)
        password = forms.CharField(label=(u'Pass'), widget=forms.PasswordInput(render_value=False), max_length=30)

带弹出框的模板片段：

<ul class="nav pull-right">
    {% if user.is_authenticated %}
    <li><a href="/profile/">{{ user }}</a></li>
    <li>
        <form style="margin:0;" action='/logout/' method="POST">
        {% csrf_token %}
            <input type="submit" value="Logout" class="btn btn-link" style="color:#777777;" /></li>
            <input type="hidden" name="next" value="{{ current_path }}" />
        </form>
    </li>
    {% else %}
    <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">Login <strong class="caret"></strong></a>
        <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
            <form action='/login/' method="POST">
            {% csrf_token %}
                {% if form.errors %}
                    {{ form.errors}}
                {% endif %}
                <label for="id_email">Login:</label>
                <input type="text" name="email" id="id_email">
                <br />
                <label for="id_password">Pass:</label>
                <input type="password" name="password" id="id_password">
                <br />
                <input class="btn btn-primary" type="submit" value="Login" />
                <input type="hidden" name="next" value="{{ current_path }}" />
            </form>
        </div>
    </li>
</ul>

Answer 1

如果您不想重新加载页面，则必须使用ajax提交，并对其执行返回方法。