Django Ajax 登陆验证

最新推荐文章于 2021-08-30 16:36:35 发布

Peace & Love

最新推荐文章于 2021-08-30 16:36:35 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Django 文章标签： django ajax 前端登陆验证

本文链接：https://blog.youkuaiyun.com/u013205877/article/details/77101116

Django 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用Django实现简单的Ajax数据展示及高级的Ajax验证登录功能，包括前后端交互的具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 简单的Ajax展示

#前端
<div class="col-lg-9">
 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
           $.getJSON("{% url 'pythonnav:ajax_list' %}",function(ret){
             for (var i = ret.length - 1; i >= 0; i--) {
               $('.col-lg-9').append(
               '<label class="checkbox-inline">
               <input type="checkbox" id="inlineCheckbox" value="" name="check_box_list">' + ret[i] + '</label>
                ')
          };
        })
    })
</script>
</div>



#urls.py
url(r'^ajax_list/$', views.ajax_list, name='ajax_list'),


#视图函数
def ajax_list(request):
    a = QuestionCategory.objects.all()
    print a
    es = []
    for e in a:
        es.append(e.category_name)
    print es
    return HttpResponse(json.dumps(es), content_type='application/json')

参考:http://code.ziqiangxuetang.com/django/django-ajax.html

2. 高级的Ajax验证登陆,数据交互

1.views.py 这里用到了Django的糖authenticate,如果验证通过就再吃另一块糖login直接登陆,如果没有就返回一个 “1”给前端作为验证密码失败的依据


def user_login(request):
    username = request.POST['username']
    password = request.POST['password']

    user = authenticate(username=username,password=password)

    if user is not None:
        # if user.is_active:
        login(request,user)
        # print 'succeed'
        # return render(request,'index.html')
        #
        return HttpResponse(1)

    else:
        # es="用户名或者密码错误"
        # return HttpResponse({'var1' : json.dumps(es)}, content_type='application/json')
        return HttpResponse("用户名或者密码错误")

2.urls.py 这块没什么可说的就是匹配下url和对应的views.py里面的方法


url(r'^user_login$', views.user_login, name='user_login'),

3.django下ajax这类POST请求会被爆403(FORBIDDEN),将下面js加进去就能解决了


<script>
    function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
    var csrftoken = getCookie('csrftoken');
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
</script>

4.完整的前端html页面,用jquery写比原生js写Ajax方便多了


<!DOCTYPE html>

<html lang="en">

{% load staticfiles %}

<head>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<script>
    function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
    var csrftoken = getCookie('csrftoken');
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
</script>

<script>
$(document).ready(function(){
  $("#login1").click(function(){

      $.post("{% url 'pythonnav:user_login' %}",
               {
                username:$("#username").val(),
                password:$("#password").val(),
                },
                function(ret){
                     if (ret==1){
                        alert('登录成功');
                        window.location.href = "{% url 'pythonnav:index' %}";
                        }
                      else{
                         alert('帐号或密码错误');
                        }

        });


  });
});
</script>

</head>

<body class="login-body">

<div class="container">
<div class="form-signin" >
    <h2 class="form-signin-heading">欢迎登陆</h2>
    <div class="login-wrap">
        <input type="text" class="form-control" placeholder="账户名" autofocus name="username" id="username">
        <input type="password" class="form-control" placeholder="密码" name="password" id="password">

        <label class="checkbox">
            <a href="{% url 'pythonnav:register_html' %}">注册新账户</a>
            <span class="pull-right"> <a href="#"> 忘记密码</a></span>
        </label>


        <button class="btn btn-lg btn-login btn-block" id="login1">登陆</button>

    </div>

</div>
</div>
</body>
</html>