深入解析Ajax

博客核心内容：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))