Django - 使用jQuery登录

时间:2016-07-06 03:04:02

标签: jquery django

当我点击登录按钮时,我想转到索引页面。不知道我是否应该编写jQuery。我想得到专业人士的帮助。

o views.py - 已更新

from django.contrib.auth import (
    authenticate,
    get_user_model,
    login,
    logout,

    )
from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login, logout

from .forms import LoginForm

def login_view(request):
    print(request.user.is_authenticated())
    next = request.GET.get('next')
    form = LoginForm(request.POST or None)
    if form.is_valid():
        username = form.cleaned_data.get('username')
        password = form.cleaned_data.get('password')
        user = authenticate(username=username, password=password)
        login(request, user)
        if next:
            return redirect(next)
        return redirect("/")
    return render(request, "accounts/form.html")

o模板

<div class="row">
    <div class="title" data-animation="fadeInDown" data-animation-delay=".8s">
        <h1>SOA</h1>
         <h5>Storage Operation Automation</h5>
    </div>
    <div id="form_1" data-animation="bounceIn">
        <div class="form-header">
            <i class="fa fa-user"></i>
        </div>
                <div class="form-main">
                <form method="POST" action="{% url 'login' %}">{% csrf_token %}
                <div class="form-group">
                    <input type="text" id="un_1" class="form-control" placeholder="Username" required="required" name ="username">
                    <input type="password" id="pw_1" class="form-control" placeholder="Password" required="required" name="password">
                 </div>
                                 <button id="signIn_1" type="submit" class="btn btn-block signin">LOG IN</button>
                        </form>
         </div>
        <div class="form-footer">
        <div class="row">
            <div class="col-xs-7">
                <i class="fa fa-unlock-alt"></i>
                <a href="#password_recovery" id="forgot_from_1">FORGET PASSWORD</a>
            </div>
            <div class="col-xs-5">
                <i class="fa fa-check"></i>
                <a href="#signup_window" id="signup_from_1">Register</a>
            </div>
        </div>
    </div>      
</div>

o jQuery - 已更新

(function($) {

    // custom checkbox skin plugin
    $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-orange',
    radioClass: 'iradio_minimal-orange',
    increaseArea: '20%' // optional
  });

    // sign in form 1
    $('#signIn_1').click(function (e) {  
        var username = $.trim($('#un_1').val());
        var password = $.trim($('#pw_1').val());
        if ( username == '' && password == '' ) {
            $('#form_1 .fa-user').removeClass('success').addClass('fail');
            $('#form_1').addClass('fail');          
        } else if ( username == 'username' && password == 'password'){
            $('#form_1 .fa-user').removeClass('fail').addClass('success');
            $('#form_1').removeClass('fail').removeClass('animated');
            return false;
        } else {
            $.ajax({
                type : "POST",
                url : "index/index.html",
                data : "{ username : username, password : password }"
                success: function(data) {
                    $('#form_1 .fa-user').removeClass('fail').addClass('success');
                    $('#form_1').removeClass('fail').removeClass('animated');
                }
            return false;
        }
    });

})(jQuery);

o显示

http://14.63.253.232/login/

enter image description here

0 个答案:

没有答案