Django（八）：ajax请求(get+post)、cookie+session会话、登陆装饰器

最新推荐文章于 2022-06-26 11:10:40 发布

重回幼稚园当老大

最新推荐文章于 2022-06-26 11:10:40 发布

阅读量648

点赞数

本文链接：https://blog.csdn.net/Gym987/article/details/102786985

版权

1、ajax介绍

ajax异步的js和xml

普通请求：会携带整个页面提交，最明显的特征刷新页面，页面重置。好多的静态资源页面不需要刷新，并且刷新的时候可能阻塞整个服务。

缺点：

用户体验特别差
请求内容和响应内容冗余

基于上面的问题，ajax出现了

ajax能够发送局部的请求，页面整体不刷新，只是局部刷新
ajax可以发送一个异步请求，请求的过程中不会阻塞整个服务

ajax google公司

ajax需要使用js语法编写，原生的js比较复杂，因为各种浏览器都对ajax兼容性不一样，使用js编写ajax，首先需要完成各个浏览器对js的实例创建，我们使用jq封装过的ajax

2、ajax请求

1、导包jq

2、ajax完成一个get请求

需要两个视图

1、完成获取页面的功能

2、接收ajax提交的请求，返回响应

ajax的结构

<script>
    //通过浏览器 $("#id1").val()  获取值 $("#id2").click()
    $("#check_value").click(
        function(){
            username = $("#username").val();   //获取姓名的值
            password = $("#password").val();   //获取密码的值
            $.ajax(             //ajax 发起一个ajax请求

                {               //ajax请求的数据需要放在一个对象中

                    url:'',     //ajax请求的路径
                    type:'',    //ajax请求的类型
                    data:'',    //ajax请求的数据 在post请求中 去填写
                    success:function(data){     //请求成功之后执行的 data接口返回数据
                    
        },
        error:function(error){   //请求报错之后执行
        }
        
    }
    )
  }    
)

完成用户名，密码校验的功能

模板：

 <script src="/static/shop/js/jquery.min.js"></script>
</head>
<body>
<form action="">
    姓名<input id="username" type="text" name="username">
    密码<input id="password" type="password" name="password">
    <input id="check_value" type="button" value="提交">
</form>
<script>
    //   通过 选择器        $("#id1").val()      获取值    $("#id2").click()
    $("#check_value").click(
        function () {
            username = $("#username").val();    // 获取姓名的值
            password = $("#password").val();    // 获取密码的值
            url = "/ajax_get_data/?username=" +username + "&password=" + password

            $.ajax(                               //  ajax 发起一个ajax请求
                {                                 //  ajax请求的数据需要放在一个对象中
                    url:url,                     // ajax 请求的路径
                    type:'get',                     //  ajax 请求的类型
                    data:'',                    //  ajax 请求的数据  在post请求中 去填写
                    success:function (data) {     //  请求成功之后执行的   data 接口返回的数据
                        console.log(data);
                        console.log(data.content);
                        console.log(data.code);
                    },
                    error:function (error) {       //  请求报错之后执行

                    }
                }
            )
        }
    )

</script>

视图：

from django.http import JsonResponse
def ajax_get(request):
    return render(request,"ajax_get.html")
## ajax 完成一个 校验用户名  密码的案例
def ajax_get_data(request):
    result = {"code":10000,"content":""}
    data = request.GET
    username = data.get("username")
    password = data.get("password")
    if username is None or password is None:
        result['code'] = 10001
        result['content'] = "请求参数为空"
    else:
        user = User.objects.filter(name=username,password=setPassword(password)).first()
        if user:
            result['code'] = 10000
            result['content'] = "用户可登陆"
        else:
            result['code'] = 10002
            result['content'] = "用户不存在或者密码不正确"
    ##  返回一个json对象
    return JsonResponse(result)
    # return HttpResponse("这个是ajax提交数据")

ajax发送一个get请求

需要两个视图

1、一个视图提供页面（处理get请求）

返回一个有表单，有ajax请求的页面

2、第二个视图接收ajax请求，处理请求，返回响应

jsonresponse对象

3、ajax完成一个post请求

ajax_post请求跟get请求一样，需要两个视图，是一个post请求，CSRF的问题

不同的地方：

get请求拼接路径和参数 /index/?name=zhangsan&age=18
get请求中的type=get
post构造数据字典
type=post
构造字典的时候需要添加csrf

模板

<form action="" method="post">
     {% csrf_token %}
    名字：<input id = "username" type="text" name="username"><br>
    密码：<input id = "password" type="password" name="password"><br>
{#    <input type="submit" value="提交">#}
    <input id = "check_value" type="button" value="提交">

</form>
<script>
    $("#check_value").click(
        function () {
            // 获取值
            username = $("#username").val();
            password = $("#password").val();
            //url = "/ajax_post_data/?username="+username+"&password=" + password;
            // 构造数据字典
            send_data = {
                "username":username,
                "password":password,
                "csrfmiddlewaretoken":"{{ csrf_token }}",
            };
            console.log(send_data)
            url = "/ajax_post_data/";
            $.ajax(
                {
                    url:url,
                    type:"post",
                    data:send_data,
                    success:function (data) {
                        console.log(data);
                    },
                    error:function (error) {
                        console.log(error);
                    }
                }
            )

        }
    )


</script>

视图

判断用户是否存在

当失去焦点的时候，判断用户是否存在

局部刷新 ajax
提交地址（处理业务的视图）
视图中获取传过来的参数，判断用户是否存在
不存在：返回结果
存在：返回结果
页面，拿到结果，进行渲染

视图：

def ajax_post_data(request):
    ## 注册
    result = {}
    username = request.POST.get("username")
    password = request.POST.get("password")
    if len(username) == 0 or len(password) == 0:
        result["code"] = 10001
        result["content"] = '请求参数为空'
    else:
        ## 添加用户
        user= User()
        user.name = username
        user.password= setPassword(password)
        try:
            user.save()
            result["code"] = 10000
            result["content"] = '添加数据成功'
        except:
            result["code"] = 10002
            result["content"] = '添加数据错误'
    ## 注册
    return JsonResponse(result)


## 校验用户名是否存在
def checkusername(request):
    result = {'code':10001,"content":""}
    #get 请求
    username= request.GET.get("name")
    print (username)
    # 判断用户是否存在
    user = User.objects.filter(name=username).first()
    if user:
        ## 存在
        result = {'code': 10001, "content": "用户名已存在"}
    else:
        result = {'code': 10000, "content": "用户名不存在"}


    return JsonResponse(result)

模板

<body>

<form action="" method="post">
     {% csrf_token %}
    名字：<input id = "username" type="text" name="username"><br>
    密码：<input id = "password" type="password" name="password"><br>
{#    <input type="submit" value="提交">#}
    <input id = "check_value" type="button" value="提交">

</form>
<p id="text"></p>


<script>

    $("#username").blur(
        function () {
            username = $("#username").val();
            url = '/checkusername/?name='+username
            $.ajax(
                {
                    url:url,
                    type:'get',
                    data:'',
                    success:function (data) {
                        $("#text").text(data.content);
                    },
                    error:function (error) {
                        $("#text").text(error);
                    }
                }
            )

        }
    )


    $("#check_value").click(
        function () {
            // 获取值
            username = $("#username").val();
            password = $("#password").val();
            //url = "/ajax_post_data/?username="+username+"&password=" + password;
            // 构造数据字典
            send_data = {
                "username":username,
                "password":password,
                "csrfmiddlewaretoken":"{{ csrf_token }}",
            };
            console.log(send_data)
            url = "/ajax_post_data/";
            $.ajax(
                {
                    url:url,
                    type:"post",
                    data:send_data,
                    success:function (data) {
                        console.log(data);
                        console.log(data.content);
                        $("#text").text(data.content);

                    },
                    error:function (error) {
                        console.log(error);
                    }
                }
            )

        }
    )


</script>

cookie和seeion

由于http请求是无状态的，无法记录身份，所以需要一种机制能够长期的记录身份，最早出现的就是cookie

cookie：是由服务器下发给用户的，保存在用户的浏览器上面，用于校验身份的数据，cookie工作机制就是跟通关文牒一样

1、用户第一次请求服务器

服务器验证用户的用户名，密码，下发cookie

2、用户第二次携带cookie请求服务器

服务器根据用户携带的cookie确认用户的身份

cookie的

优点：根本上解决了用户持续访问的问题

缺点：由于cookie是保存在用户本地，所以导致一些安全问题，cookie可以被修改，还可以被模仿

1、根据登录流程认识cookie

1、用户提供用户名，密码进行登录

2、服务器接收用户名，密码

3、校验用户名

用户存在则校验密码密码正确则设置cookie 下发coolie 且登录成功，跳转到首页

密码错误返回密码错误

用户不存在返回用户不存在

2、cookie的使用

cookie的设置

创建一个login.html

视图：接收数据，处理数据，返回登录结果

首先完成用户登录，跳转到首页

视图

模板

cookie的设置

cookie设置参数

key cookie的键
value='' cookie的值
max_age=None cookie存在的时间，有效时间
expires=None cookie的超时时间，跟max_age 冲突，两者二选一
path='/' cookie起作用的范围，默认是当前网站
domain=None cookie起作用的域名 baidu.com
secure=False 如果为True使用https传递cookie，默认使用flase
httponly=False 如果为True只通过http传递cookie
samesite=None 相同的网站（域名）使用cookie

cookie的获取

使用cookie

首页用户登录的情况下能够显示，如果用户没有登录，跳转到login页

登录装饰器

删除cookie

登出

在退出登录的时候，删除用户cookie

session

session是为了解决cookie不安全的问题而提出的一种会话机制

session本身就是一种会话：指一次通信从开始到结束，只有在web开发当中，session才会以会话的机制出现

web的session是将用户的信息存在服务器上面的一种web身份校验技术。session需要结合cookie使用，需要通过cookie给用户下分的id（session_id）然后将用户的具体的信息，保存在服务器上面，通常是在数据库当中

cookie和session的区别

cookie存放在本地，session放在服务器上面，通常是数据库当中
校验cookie速度快，但是安全性不高
校验cookie速度慢，但是安全性相对好

session的操作

session的创建

session对象在django当中以一个类字典对象出现，我们可以使用字段的方法对其操作

session的获取

session的删除

## 登出
def logout(request):
    response = HttpResponseRedirect("/index/")
    response.delete_cookie("username")
    ## 删除session   目的是 用户再次使用相同的sessionid 进行访问，拿到的session的值是不一样的
    # del request.session["username"]   ### 删除指定session  删除的是保存在服务器上面session的值
    request.session.flush()  ## 删除所有的session

    return response

重回幼稚园当老大

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Django（八）：ajax请求(get+post)、cookie+session会话、登陆装饰器

1、ajax介绍ajax异步的js和xml普通请求：会携带整个页面提交，最明显的特征刷新页面，页面重置。好多的静态资源页面不需要刷新，并且刷新的时候可能阻塞整个服务。缺点：用户体验特别差请求内容和响应内容冗余基于上面的问题，ajax出现了ajax能够发送局部的请求，页面整体不刷新，只是局部刷新 ajax可以发送一个异步请求，请求的过程中不会阻塞整个服务ajax goo...
复制链接

扫一扫