专栏首页雪胖纸的玩蛇日常django 通过ajax完成登录

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 条评论
登录 后参与评论

相关文章

  • 18.普通用户、网格长、网格员,操作数据(5)newapp/components/wgy.vue

    玩蛇的胖纸
  • 17.普通用户、网格长、网格员,操作数据(4)newapp/components/wgz.vue

    玩蛇的胖纸
  • 3.坐标系与轴心点

    【移动物体】默认是在全局坐标系下移动的,所以点击G键Y键,会让物体在全局坐标系的Y轴方向移动,而想要让物体沿着自身坐标系的Y轴移动,则需要再点击一下Y键。

    玩蛇的胖纸
  • flask 模态弹出框(flask 64)

    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-ta...

    用户5760343
  • bootstrap bootstrap-modal.js 模态对话框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap bootstrap-modal.js 模态对话框 并获得传值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • jQuery 实现 bootstrap 模态框 删除确认

    点击删除按钮,通过jquery将删除操作的URL赋值到页面URL元素,并弹出会话框

    week
  • bootstrap 模态弹出框 常用**

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 【php增删改查实例】第二十七节 - 个人密码修改

    剽悍一小兔
  • 使用 Skeleton Screen 提升用户感知体验

    在对于加载的设计体验有了比菊花加载体验更棒的方法,即本文要讲的 Skeleton Screen Loading,中文一般叫做骨架屏。骨架屏听起来总觉得怪怪的,本...

    陈纬杰

扫码关注云+社区

领取腾讯云代金券