django 通过ajax完成登录

一、

在users/views.py中加代码:

from django.http import HttpResponse


class LoginView(View):
    """用户登录"""
    def get(self,request):
        return render(request,'index.html',{})
    def post(self,request):
        user_name=request.POST.get("username","")
        pass_word=request.POST.get("password","")
        user=authenticate(username=user_name,password=pass_word)
        if user is not None:
            login(request,user)
            return HttpResponse('{"status":"success"}')
        else:
            return HttpResponse('{"status":"fail"},{"msg":"用户名或密码错误"}')

这里注意,HttpResponse(字符串) 如果是像字典的字符串,只可以是单引号包双引号,而不能相反,不然回调到前端时,JSON.parse(字符串)就会报错!

二、

在users/urls.py中配置路由

......

from .views import LoginView
......
urlpatterns = [
    ......

    path('login/',LoginView.as_view(),name='login'),

    ......
    ]

三、

在前端的base.html中

在登录对应的模态框代码中:

<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="width: 500px">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align: center">用户登录</h4>
      </div>


  
<!--关键代码start-->    
    <div class="modal-body">
        <form id="loginform" action="#" method="post">

            <p><div style="display: inline-block;width:150px;text-align: center">
<b>用户名或邮箱:</b>
</div>
<input type="text" name="username" placeholder="用户名/邮箱"></p>
            <p><div style="display: inline-block;width:150px;text-align: center">
<b >密码:</b>
</div>
<input type="password" name="pwd" placeholder="密码"></p>
            {% csrf_token %}
        </form>

          <p><div style="margin-right: auto;margin-left: auto;background-color: orangered;width:150px;text-align: center">
<b id="login-fail"></b>
</div></p>
      </div>
<!--关键代码end-->



      <div class="modal-footer">
        <button type="button" class="btn btn-default">忘记密码</button>


          <!--关键代码start-->
        <button type="button" class="btn btn-primary" id="loginbtn">确认登录</button>
          <!--关键代码end-->


        </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->    

ajax提交代码:

<script>
    $("#loginbtn").click(function() {
        $.ajax({
            cache:false,
            type:"POST",
            url:"{% url 'users:login' %}",
            dataType:'json',
            data:$('#loginform').serialize(),
            //通过id找到提交form表单,并将表单转成字符串
            async:true,
            //异步为真,ajax提交的过程中,同时可以做其他的操作
            success:function (data) {
                //jquery3以后,会将回传过来的字符串格式的data自动json解析不用再使用一遍JSON.parse(data)了,不然反而会在控制台报错
                if(data.status=="success"){
                    location.reload();
                }else if(data.status=="fail"){
                    $('#login-fail').html(data.msg);
                }
            }
        });
    })

//如果显示了错误信息,修改输入框内容,错误信息隐藏

$("input").bind('input propertychange', function() {
    $('#login-fail').html('');
});

</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Esofar 开发日记

[译]RabbitMQ教程C#版 - “Hello World”

RabbitMQ是一个消息中间件:它接收并转发消息。您可以把它想象为一个邮局:当您把需要寄出的邮件投递到邮箱,邮差最终会把邮件送给您的收件人。在这个比喻中,Ra...

13030
来自专栏Java后端生活

Linux(六)vi和vim编辑器的使用

32450
来自专栏圣杰的专栏

RabbitMQ知多少

1.引言 RabbitMQ——Rabbit Message Queue的简写,但不能仅仅理解其为消息队列,消息代理更合适。RabbitMQ 是一个由 Erlan...

28470
来自专栏QQ音乐前端团队专栏

web模拟终端博客系统

前段时间做了一个非常有意思的模拟终端的展示页.这个页面非常有意思,它可以作为个人博客系统或者给 Linux 初学者学习终端命令,现分享给大家~

1.1K70
来自专栏owent

Redis全异步(HA)Driver设计稿

现在Redis的集群功能已经Release。但是并没有一个官方直接提供的高可用性的API可以使用。有的只有解决方案,Sentinel和Cluster。所以有必要...

11510
来自专栏有趣的django

Flask信号和wtforms 一、信号二、wtforms组件使用

28200
来自专栏游戏杂谈

Linux下使用rsync同步文件

遇到的问题是几台游戏服务器,有一台新的服务器之前已经copy(Linux的scp命令)过文件上去,但在测试的过程中发现还是图片无法正常不显示出来,然后用http...

52920
来自专栏跟着阿笨一起玩NET

C#(VB.NET)操作Windows自带的防火墙 之 启用(开启)/禁用(关闭)防火墙

转载:http://www.cnblogs.com/sjcatsoft/archive/2009/01/15/1376489.html

10120
来自专栏达摩兵的技术空间

跨页面通讯的几种方式

你经常会遇到需要跨标签共享信息的情况,那么本文就跟大家一起回顾下web端有哪些方式可以实现这样的需求。

21250
来自专栏云计算教程系列

如何在Ubuntu 14.04上运行解析服务器

Parse是一个移动后端即服务平台,自2013年起由Facebook拥有。2016年1月,Parse 宣布其托管服务将于2017年1月关闭。

6800

扫码关注云+社区

领取腾讯云代金券