基于ajax的登陆与注册

ajax的优点:

　异步交互----AJAX使用Javascript技术向服务器发送异步请求

　　浏览器页面局部刷新---AJAX无须刷新整个页面

补充：

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。



准备条件:用一张用户表记录用户的基本信息

1.先在url控件中添加一个path('login/,views.login)

2.然后在views中添加一个函数  def  login (self)

3.在创建一个login的html   用bootstrap搭建,下载至本地

4.然后在项目中开一个static的文件夹里面加上bootstrap  ,然后在setting中去引一下static的路径

5.在html中去用link引一下bootstrap文件夹

6.开始编辑login的html页面    三个盒子开始套div  class="container"    div  calss="row"   div class="col_md-4"

7.在login中添加一个验证码的地方  div+label+input

8.用PIL模块去做验证码的图像  在命令框,里面属于  pip3 install pillow

9.PIL使用方法:

参考博客  https://www.cnblogs.com/RootEvils/articles/9915549.html

10.给登陆按钮绑定事件用jquery做,先下载,然后绑定做ajax操作

 案例:

要求：登陆成功跳转到首页，失败则在后面提示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/jquery-3.3.js"></script>

</head>
<body>

<form>
       用户名 <input type="text" id="user">
       密码 <input type="password" id="pwd">
{#        这里form表单里用button#}
       <input type="button" value="提交" id="login_btn"><span class="error"></span>
       {% csrf_token %}

</form>

<script>

    $("#login_btn").click(function () {

        // 发送Ajax请求登录认证

        $.ajax({
            url:"/login/",
            type:"post",
            data:{
                user:$("#user").val(),
                pwd:$("#pwd").val(),
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
            },
            success:function (response) {
                console.log(response);   // json字符串
                var res=JSON.parse(response);  //js中的反序列化
                console.log(res);
                if (res.user){
                    // 登陆成功
                    location.href="/index/"  //跳转到首页
                }else{
                    // 登录失败，则显示。。。
                    $(".error").html(res.error).css("color","red");
                    setTimeout(function () {
                        $(".error").html("")
                    },1000)
                }

            }
        })
    })


</script>

</body>
</html>

login.html
登陆HTML

urls配置

 path('login/', views.login),

 

views.py

def login(reqeust):

    if reqeust.method=="POST":

        res={"user":None,"error":""}

        print(reqeust.POST)
        user=reqeust.POST.get("user")
        pwd=reqeust.POST.get("pwd")
        # 与数据库中的数据表信息进行比对
        user_obj=UserInfo.objects.filter(user=user,pwd=pwd).first()
        if user_obj:
            res["user"]=user
        else:
            res["error"]="用户名或者密码错误！"
        return HttpResponse(json.dumps(res))  #需要序列化

    else:
        return render(reqeust,"login.html")
视图函数

参考图

 

posted @ 2018-11-05 12:07  RootEvils  阅读(207)  评论(0)    收藏  举报