关闭

深入解析Ajax

标签: ajaxcookiesession
2441人阅读 评论(4) 收藏 举报
分类:

博客核心内容:Ajax


1、Cookie是什么
2、Session是什么
3、Ajax是什么


1、Cookie:在浏览器上面保存的键值对. 应用:用户登录 、投票
代码:

from django.shortcuts import render,redirect,HttpResponse
from app import models



# Create your views here.
def ck(request):
    print('发送过来的cookie')
    print(request.COOKIES)
    """
    发送过来的cookie:就是浏览器上面的一个键值对,相当于一个凭证
    {'nnn': '123123'}
    """
    obj = render(request,'ck.html')
    """
    效果:返回页面的同时,同时在浏览器悄悄的写了个nnn:123123
    """
    obj.set_cookie('nnn','123123')
    print('-------')
    print(obj)
    print(type(obj))
    """
    <HttpResponse status_code=200, "text/html; charset=utf-8">
    <class 'django.http.response.HttpResponse'>
    """
    return obj

def login(request):
    if request.method == 'GET':
        return  render(request,'login.html',{'msg':""})
    else:
        u = request.POST.get('user')
        p = request.POST.get('pwd')
        ct = models.UserInfo.objects.filter(username=u,password=p).count()
        if ct:
            obj =  redirect('/home/')
            # 谁登陆的话,就将用户名回写在本地了
            # 在跳转的同时在浏览器留下点cookie,并设置cookie的停留时间
            obj.set_cookie('uuuuuuuu',u,max_age=10)
            return obj
        else:
            return render(request,'login.html',{'msg':'用户名或者密码错误'})


def home(request):
    v = request.COOKIES.get('uuuuuuuu')
    if v:
        return HttpResponse('欢迎登陆')
    else:
        # 否则重新放回登陆页面
        return redirect('/login/')

前端页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="/login/" method="POST">
    <input type="text" name="user">
    <input type="text" name="pwd">
    <input type="submit" value="提交">{{ msg }}
</form>

</body>
</html>

部分截图:
这里写图片描述
2、Session是什么
牛逼博客:http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html

Cookie的定义:http://jingyan.baidu.com/article/a3aad71a86efdab1fb00969d.html

Cookie:在浏览器上面保存的键值对.
应用:用户登录
投票

Session的定义:https://zhidao.baidu.com/question/296950174.html
Session:以前服务端在浏览器这边留的是明文,引入session之后留下的是
暗文。

服务器端保存的键值对
{
asfdsfldsfd:{‘user’:’asdf’,’pws’:’asdf’}
}

Session的组件,Django是包含的.
图片对比:
这里写图片描述
代码参考:
后台:

from django.shortcuts import render,HttpResponse,redirect
from app import models



#Create your views here.
def test(request):
    # models.UserInfo.objects.create(username='lidong',password='123789')
    return HttpResponse('OK')


def login(request):
    return render(request,'login.html')


def index(request):
    if request.method == "GET":
        return redirect('/login/')
    else:
        user = request.POST.get('uuu')
        pwd = request.POST.get('ppp')
        cnt = models.UserInfo.objects.filter(username=user,password=pwd).count()
        import json
        if cnt:
            obj =  HttpResponse(json.dumps('ok'))
            # 服务器在这里留下一个cookie
            request.session['username'] = user
            request.session['password'] = pwd
            return obj
        else:
            return HttpResponse(json.dumps('no'))


def soxfree(request):
    #在登陆另外一个页面之前,先检查一下相应的cookie
    cnt = request.session.get('username')
    if cnt:
        return render(request,'sox.html')
    else:
        return redirect('/login/')

前台:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static "js/bootstrap/css/bootstrap.css" %}">
    <script src="{% static "js/jquery-3.2.1.min.js" %}"></script>
    <script src="{% static "js/bootstrap/js/bootstrap.min.js" %}"></script>
</head>

<body>
    <input type="text" name="username"><br>
    <input type="password" name="password"><br>
    <input type="button" name="提交">
</body>

<script>
    $("input[type=button]").on('click',function(){
        var username = $('input[name=username]').val()
        var password = $('input[name=password]').val()

        $.ajax({
            url:'/index/',
            type:'POST',
            data:{'uuu':username,'ppp':password},
            success:function(data){
                data = JSON.parse(data)
                if (data == 'ok'){
                    window.open('/soxfree/','_self')
                }else
                {
                    alert('用户名或者密码错误')
                }
            }
        })
    })
</script>

</html>

看来session就是一系列cookie的集合,并通过sessionID返回给客户端。
3、Ajax的方式
Ajax操作:
只要form表单提交,一定会刷新页面.
基于Ajax操作,要想成功之后跳转,只能是:js收到消息之后,在Js里面写段代码实现跳转,
而不能是redirect.
代码1:成功跳转百度,失败则进行提示
前端页面:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="{% static "js/bootstrap/css/bootstrap.css" %}">
    <script src="{% static "js/jquery-3.2.1.min.js" %}"></script>
    <script src="{% static "js/bootstrap/js/bootstrap.min.js" %}"></script>

</head>
<body>
<h1>Ajax操作</h1>
<div>
    <input type="text" name="user" id="user">
    <input type="text" name="pwd" id="pwd">
    {# 点击之后,如果还想发送,那我们就要依赖Ajax #}
    {#给提交按钮增加事件:只要点提交,就偷偷的发送数值#}
    <input id="btn" type="button" value="提交">
</div>
<script>
    {#页面事件执行完之后将这行这个函数#}
    $(function () {
        bindBtn();
    })
    function bindBtn() {
        $('#btn').click(function(){
            var u = $('#user').val();
            var p = $('#pwd').val();

        {#获得完用户名和密码之后,我们要向后台发送数据,调用jquery的ajax方法去执行#}
            $.ajax(
                {
                   {# url貌似就是当前页面#}
                    url:'/aj/',
                    type:'POST',
                    {# 后台数据库如何拿到这个数值并进行匹配的呢?#}
                    data:{uuu:u,ppp:p},
                    {# 后台返回数据之后,我们的浏览器会自动执行某个函数,下面的data是服务端返回的数据#}
                    success:function(data){
                        if (data == "Error"){
                            alert("用户名或者密码错误!")
                        }else if(data == "OK")
                        {
                           location.href = "http://www.baidu.com"
                        }
                    }
                }
            )
        })
    }
</script>
</body>
</html>

后台页面:

def aj(request):
    if request.method == "GET":
        return render(request,'aj.html')
    elif request.method == "POST":
        """
        后台接收数据的方式和我们提交form表单的时候是一模一样的
        """
        user = request.POST.get('uuu')
        pwd = request.POST.get('ppp')
        obj = models.UserInfo.objects.filter(username=user, password=pwd).first()
        if obj:
            # 登陆成功,跳转到后台管理,对于ajax提交,不能redirect,呵呵,meiyong
            return  HttpResponse("OK")
        else:
            #登陆失败,页面显示错误信息
            return HttpResponse("Error")

改进后的代码:改进1

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="{% static "js/bootstrap/css/bootstrap.css" %}">
    <script src="{% static "js/jquery-3.2.1.min.js" %}"></script>
    <script src="{% static "js/bootstrap/js/bootstrap.min.js" %}"></script>

</head>
<body>
<h1>Ajax操作</h1>
<div>
    <input type="text" name="user" id="user">
    <input type="text" name="pwd" id="pwd">
    {# 点击之后,如果还想发送,那我们就要依赖Ajax #}
    {#给提交按钮增加事件:只要点提交,就偷偷的发送数值#}
    <input id="btn" type="button" value="提交">
</div>
<script>
    {#页面事件执行完之后将这行这个函数#}
    $(function () {
        bindBtn();
    })
    function bindBtn() {
        $('#btn').click(function(){
            var u = $('#user').val();
            var p = $('#pwd').val();

        {#获得完用户名和密码之后,我们要向后台发送数据,调用jquery的ajax方法去执行#}
            $.ajax(
                {
                   {# url貌似就是当前页面#}
                    url:'/aj/',
                    type:'POST',
                    {# 后台数据库如何拿到这个数值并进行匹配的呢?#}
                    data:{uuu:u,ppp:p},
                    {# 后台返回数据之后,我们的浏览器会自动执行某个函数,下面的data是服务端返回的数据#}
                    success:function(data){
                    {#将字符串反序列化成字典#}
                        var data_dict = JSON.parse(data)
                        if (data_dict.status){
                           location.href = "http://www.baidu.com";
                        }else{
                            alert(data_dict.error);
                        }
                    }
                }
            )
        })
    }
</script>
</body>
</html>

后台代码:

def aj(request):
    if request.method == "GET":
        return render(request,'aj.html')
    elif request.method == "POST":
        """
        后台接收数据的方式和我们提交form表单的时候是一模一样的
        """
        user = request.POST.get('uuu')
        pwd = request.POST.get('ppp')
        obj = models.UserInfo.objects.filter(username=user, password=pwd).first()
        ret = {'status':True,'error':None}
        import json
        if obj:
            # 将字段序列化
            return HttpResponse(json.dumps(ret))
        else:
            ret['status'] = False
            ret['error'] = "用户名或者密码错误"
            return HttpResponse(json.dumps(ret))

运行效果是一样的。
改进2:如何跳转到其他页面

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="{% static "js/bootstrap/css/bootstrap.css" %}">
    <script src="{% static "js/jquery-3.2.1.min.js" %}"></script>
    <script src="{% static "js/bootstrap/js/bootstrap.min.js" %}"></script>

</head>
<body>
<h1>Ajax操作</h1>
<div>
    <input type="text" name="user" id="user">
    <input type="text" name="pwd" id="pwd">
    {# 点击之后,如果还想发送,那我们就要依赖Ajax #}
    {#给提交按钮增加事件:只要点提交,就偷偷的发送数值#}
    <input id="btn" type="button" value="提交">
</div>
<script>
    {#页面事件执行完之后将这行这个函数#}
    $(function () {
        bindBtn();
    })
    function bindBtn() {
        $('#btn').click(function(){
            var u = $('#user').val();
            var p = $('#pwd').val();

        {#获得完用户名和密码之后,我们要向后台发送数据,调用jquery的ajax方法去执行#}
            $.ajax(
                {
                   {# url貌似就是当前页面#}
                    url:'/aj/',
                    type:'POST',
                    {# 后台数据库如何拿到这个数值并进行匹配的呢?#}
                    data:{uuu:u,ppp:p},
                    {# 后台返回数据之后,我们的浏览器会自动执行某个函数,下面的data是服务端返回的数据#}
                    success:function(data){
                    {#将字符串反序列化成字典#}
                        var data_dict = JSON.parse(data)
                        if (data_dict.status){
                            {#  这个时候能够跳转,但是没有登陆 #}
                           location.href = "/home/";
                        }else{
                            alert(data_dict.error);
                        }
                    }
                }
            )
        })
    }
</script>
</body>
</html>

后台部分代码:

def logout(request):
    # 将当前用户的登录信息清空
    request.session.clear()
    return redirect('/login/')

def aj(request):
    if request.method == "GET":
        return render(request,'aj.html')
    elif request.method == "POST":
        """
        后台接收数据的方式和我们提交form表单的时候是一模一样的
        """
        user = request.POST.get('uuu')
        pwd = request.POST.get('ppp')
        obj = models.UserInfo.objects.filter(username=user, password=pwd).first()
        ret = {'status':True,'error':None}
        import json
        if obj:
            # 将字段序列化
            request.session['user'] = user
            request.session['pwd'] = pwd
            return HttpResponse(json.dumps(ret))
        else:
            ret['status'] = False
            ret['error'] = "用户名或者密码错误"
            return HttpResponse(json.dumps(ret))

这里写图片描述
这里写图片描述

3
1
查看评论

Ajax深入学习笔记

最近在学习ajax,下面整理了一下学习的内容,以便巩固用。 先来看看为什么要用ajax,也就是同步和异步是什么:同步和异步同步的意思就是客户端提交表单,发起请求后需要一直等待服务器端的响应,收到服务器端的响应后需要重新载入页面。 而有了ajax,则可进行异步交互,比如不会提交整个表单后等待服务...
  • VivianHope
  • VivianHope
  • 2015-06-03 15:54
  • 1802

《深入解析Windows操作系统》要点整理

关于操作系统中为什么要使用句柄: 个人理解是,因为虚拟内存的机制,导致同一个对象的物理地址是经常变化的,所以操作系统不能通过物理地址直接操作对象,而采用句柄这样的索引来查找物理地址。 在同一个进程中,其实是可以通过虚拟地址去查找对象的。但句柄相对于用虚拟地址的方式还有个好处,就是他只是一个索引,...
  • suhuaiqiang_janlay
  • suhuaiqiang_janlay
  • 2015-08-16 16:29
  • 997

深入解析Mac OS X & iOS操作系统

深入解析Mac OS X & iOS操作系统 系统开发者、内核黑客和对苹果感到好奇的人们注意了!本书探讨了Mac OS X系统和iOS系统的方方面面,深入讲解了两个系统的架构,讨论了框架手册没有讨论的内容。本书清晰而详细地讨论了苹果操作系统的内部工作原理,包括苹果私有的API,书中...
  • chengying332
  • chengying332
  • 2015-07-02 14:26
  • 844

深入理解Nginx 模块开发与架构解析-陶辉 读书笔记

p3
  • ai2000ai
  • ai2000ai
  • 2016-09-18 15:32
  • 1741

新书上市《深入解析Android 5.0系统》

《深入解析Android 5.0系统》详细剖析了最新Android 5.0 系统主要框架的原理和具体实现。本书共24章,覆盖了Android 5.0 系统中、下层重要的模块,对于每个模块都详细介绍了它们的架构、原理及代码实现等各个方面,尽量让读者知其然,又知其所以然,达到学以致用的目的。主要内容为:...
  • u013234805
  • u013234805
  • 2015-05-02 10:38
  • 3470

《深入理解Nginx-模块开发与架构解析》

一、研究Nginx前的准备工作 1、常见负载均衡          1)Apache:被设计成了一个重量级的、不支持高并发的Web服务器       &#...
  • qq_21033663
  • qq_21033663
  • 2017-09-14 19:48
  • 382

深入理解ajax系列第五篇

前面的话   一般地,使用readystatechange事件探测HTTP请求的完成。XHR2规范草案定义了进度事件Progress Events规范,XMLHttpRequest对象在请求的不同阶段触发不同类型的事件,所以它不再需要检査readyState属性。这个草案定义了与客户端服务器通...
  • wuji3390
  • wuji3390
  • 2017-05-04 15:07
  • 70

《深入解析Microsoft Windows操作系统》译序

深入解析Microsoft Windows操作系统Microsoft® Windows® Internals (Fourth Edition)中文版适用于Microsoft Windows Server™ 2003、Windows XP和Windows 2000作者:Mark E...
  • panaimin
  • panaimin
  • 2007-01-27 02:16
  • 15120

《TCP-IP详解 卷2:实现》学习笔记—mbuf的深入解析

下面将要经常会的遇到的四种不同类型的mbuf,它们依据在成员mh_flags中填写的不同标志M_PKTHDR和M_EXT而不同。 1)   第一类mbuf的mh_flags等于0,mbuf只包含数据,在mbuf中有108字节的数据空间,指针mh_data指向这108字节缓存中的某...
  • yu_xiaofei
  • yu_xiaofei
  • 2013-11-26 18:55
  • 1639

SAS进阶《深入解析SAS》之SAS数据挖掘的一般流程

SAS进阶《深入解析SAS》之SAS数据挖掘的一般流程1. 所谓数据挖掘,是指通过对大量的数据进行选择、探索与建模,来揭示包含在数据中以前不为人所知的模式或规律,从而为商业活动或科学研究提供帮助和服务。2. 数据挖掘重要的两个类别:有监督分析(SupervisedAnalysis),无监督分析(Un...
  • dream_an
  • dream_an
  • 2015-12-31 18:05
  • 1037
    个人资料
    • 访问:651363次
    • 积分:9256
    • 等级:
    • 排名:第2369名
    • 原创:332篇
    • 转载:87篇
    • 译文:0篇
    • 评论:113条
    最新评论