码迷,mamicode.com
首页 > Web开发 > 详细

AJAX异步、sweetalert和Cookie初识

时间:2018-11-13 22:12:18      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:from   模拟   objects   时间   isp   span   提示   pid   func   

一、AJAX的异步示例
1. urls.py
技术分享图片
from django.conf.urls import url
from apptest import views


urlpatterns = [
    url(r^atest/, views.atest),
    url(r^ajax1/, views.ajax1),
    url(r^ajax2/, views.ajax2),
]
View Code

2. atext.HTML
技术分享图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>

<body>
<div>
    <input type="text" id="i1">
    <button id="b1">按钮1</button>
</div>

<div>
    <input type="text" id="i2">
    <button id="b2">按钮2</button>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    // 点击按钮1给ajax1发送get请求
    $("#b1").click(function () {
        $.ajax({
            url: /ajax1/,
            type: get,
            success: function (res) {
                $("#i1").val(res)
            }
        })
    });

    // 点击按钮2给ajax2发送get请求
        $("#b2").click(function () {
        $.ajax({
            url: /ajax2/,
            type: get,
            success: function (res) {
                $("#i2").val(res)
            }
        })
    });


</script>

</body>
</html>
View Code

 

3.views.py
技术分享图片
def atest(request):
    return render(request, atest.html)


def ajax1(request):
    import time
    time.sleep(3) # 模仿网络堵塞的时候
    return HttpResponse(ajax1)


def ajax2(request):
    return HttpResponse(ajax2)
View Code

4.结果解析
在页面中首先点击按钮1,然后立刻点击按钮2,由于按钮1的网络堵塞(我用time模块模拟的堵塞),服务端会延迟几秒才返回响应,
如果AJAX的请求是同步的,那么按钮2的请求必须要等到按钮1响应后才会被处理,而从我们这个简单的实例中可以看出,
按钮1没有得到响应的时候,按钮2已经得到响应结果了,因此可以看出AJAX的请求是异步的。



二、Sweetalert示例
1、Bootstrap-sweetalert
    项目下载
    https://github.com/lipis/bootstrap-sweetalert

    使用方法
    https://lipis.github.io/bootstrap-sweetalert/

使用步骤
    1. 下载插件
    2. 解压 --> 拿到dist目录下的内容
    3. 拷贝到Django项目的static文件夹下
    4. 在HTML页面上导入sweetalert.css和sweetalert.js

2、示例(此处只是实现了删除的Sweetalert)
1.index页面代码
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    {% load static %}
    <link rel="stylesheet" href="{% static ‘bootstrap-3.3.7/css/bootstrap.css‘ %}">
    <link rel="stylesheet" href="{% static ‘sweetalert/sweetalert.css‘ %}">
    <link rel="stylesheet" href="{% static ‘font-awesome-4.7.0/css/font-awesome.css‘ %}">
    <style>
        div.sweet-alert.showSweetAlert h2 {
            margin-top: 30px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 70px">
            <a href="/logout/">注销</a>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>出版社名称</th>
                    <th>出版社地址</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for publisher in publisher_list %}
                    <tr pid="{{ publisher.id }}">
                        <td>{{ forloop.counter }}</td>
                        <td>{{ publisher.pname }}</td>
                        <td>{{ publisher.addr }}</td>
                        <td>
                            <button class="btn btn-warning">
                                <i class="fa fa-pencil"></i>
                                编辑
                            </button>
                            <button class="btn btn-danger delete-btn">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                删除
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% csrf_token %}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="{% static ‘bootstrap-3.3.7/js/bootstrap.min.js‘ %}"></script>
<script src="{% static ‘sweetalert/sweetalert.js‘ %}"></script>
<script>
    $(.delete-btn).click(function () {
        var deleteId = $(this).parent().parent().attr(pid);
        console.log(deleteId,typeof deleteId);
        swal({
                title: "确定要删除吗?",
                text: "删除后无法找回",
                type: "warning",  // success/info/warning/error
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                showLoaderOnConfirm: true,  // 点击确认按钮之后会有一个加载的动画
                closeOnConfirm: false
            },
            function () {  // 当点击确认按钮的时候会执行这个匿名函数
                $.ajax({
                    url: /delete_publisher/,
                    type: post,
                    data: {id: deleteId, csrfmiddlewaretoken: $([name="csrfmiddlewaretoken"]).val()},
                    success: function (res) {
                        if (res.code === 0){
                            // 删除成功
                            // 在页面上删除当前行数据
                            var $currentTr = $([pid= + deleteId + ]);
                            // 更新序号
                            // 1. 先找到当前行后面所有的tr
                            var nextAllTr = $currentTr.nextAll(tr);
                            // 2. 每一个tr的第一个td 依次 -1
                            nextAllTr.each(function () {
                                var num = $(this).children().eq(0).text()-1; // 这时候的this是进入循环的那个tr
                                $(this).children().eq(0).text(num);
                            });
                            // 删掉当前行
                            $currentTr.remove();
                            // 弹框提示
                            swal(删除成功, 准备跑路吧!, success);

                        }else {
                            // 删除失败
                            swal(删除失败, res.err_msg, error);
                        }
                    }
                })
            });
    })
</script>
</body>
</html>
View Code


2.views.py
技术分享图片
# 首页
def index(request):
    publisher_list = Publisher.objects.all()
    return render(request, index.html, {publisher_list: publisher_list})


# 删除出版社
def delete_publisher(request):
    delete_id = request.POST.get(id)
    res = {code: 0}
    try:
        Publisher.objects.filter(id=delete_id).delete()
    except Exception as e:
        res[code] = 1
        res[err_msg] = str(e)
    return JsonResponse(res)
View Code

 



三、Cookie
1、介绍
1.Cookie的由来
大家都知道HTTP协议是无状态的。

无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不会直接影响后面的请求响应情况。

一句有意思的话来描述就是人生只如初见,对服务器来说,每次的请求都是全新的。

状态可以理解为客户端和服务器在某次会话中产生的数据,那无状态的就以为这些数据不会被保留。会话中产生的数据又是我们需要保存的,也就是说要“保持状态”。因此Cookie就是在这样一个场景下诞生。


2.什么是Cookie
Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务器提取有用信息。
简单点说,Cookie就是服务端给浏览器的小纸条!保存在浏览器端的键值对。


3.Cookie的原理
cookie的工作原理是:由服务器产生内容,浏览器收到请求后保存在本地;当浏览器再次访问时,浏览器会自动带上Cookie,这样服务器就能通过Cookie的内容来判断这个是“谁”了。


2、Django中操作Cookie
1.设置Cookie
rep = HttpResponse(...)
rep = render(request, ...)

rep.set_cookie(key,value, max_age=秒)
rep.set_signed_cookie(key, value, max_age=秒, salt=加密盐,...)

参数:
    key, 键
    value=‘‘, 值
    max_age=None, 超时时间(常用浏览器使用这个)
    expires=None, 超时时间(这个参数是针对IE浏览器的)
    path=/, Cookie生效的路径,/ 表示根路径,特殊的:根路径的cookie可以被任何url的页面访问
    domain=None, Cookie生效的域名
    secure=False, https传输
    httponly=False 只能http协议传输,无法被JavaScript获取(不是绝对,底层抓包可以获取到也可以被覆盖)


2.获取Cookie
set_cookie取值:
    request.COOKIES  --> 是一个大字典
    request.COOKIES[key] 或者 request.COOKIES.get(key, 设置取不到值时默认使用的值)

set_signed_cookie取值:
    request.get_signed_cookie(key=‘‘, salt=set_signed_cookie的salt的值, default=获取不到值的时候默认使用的值, max_age=None)

参数:
    default: 默认值
    salt: 加密盐
    max_age: 后台控制过期时间



3.删除Cookie
def logout(request):
    rep = redirect("/login/")
    rep.delete_cookie("user")  # 删除用户浏览器上之前设置的usercookie值
    return rep



3、Cookie登录验证示例
1.index页面代码就是上面的代码

2.login页面代码
技术分享图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
    {% load static %}
    <link rel="stylesheet" href="{% static ‘bootstrap-3.3.7/css/bootstrap.min.css‘ %}">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4" style="margin-top: 70px">
            <h2 class="text-center">欢迎登录</h2>
            <form action="" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label for="exampleInputUser">用户名</label>
                    <input type="text" class="form-control" id="exampleInputUser" placeholder="username" name="username">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="remember" value="seven"> 七天记住密码
                    </label>
                </div>
                <button type="submit" class="btn btn-success btn-block">登录</button>
                <p style="color: red;">{{ error_msg }}</p>
            </form>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="{% static ‘bootstrap-3.3.7/js/bootstrap.min.js‘ %}"></script>
</body>
</html>
View Code

3.views.py
技术分享图片
from django.shortcuts import render, HttpResponse, redirect
from functools import wraps
from django import views
from app01.models import *
from django.http import JsonResponse
# Create your views here.


# 用装饰器做cookie登录验证
def check_login(func):
    @wraps(func)
    def inner(request, *args, **kwargs):
        # 先做cookie验证,如果cookie中有我登录的信息,则可以访问指定的页面
        if request.COOKIES.get(xm) == sb:
            rep = func(request, *args, **kwargs)
            return rep
        else:
            # 否则,让用户去登录
            # 拿到当前访问的url
            return_url = request.path_info
            return redirect(/login/?returnUrl={}.format(return_url))
    return inner



# 登录
class LoginView(views.View):
    def get(self, request):
        return render(request, login.html)

    def post(self, request):
        username = request.POST.get(username)
        pwd = request.POST.get(password)
        is_rem = request.POST.get(remember, None)
        is_ok = UserInfo.objects.filter(name=username, password=pwd)
        if is_ok:
            # 判断是否从其他页面跳转到登录页面,拿到return_url
            # 如果取不到returnUrl,默认跳转到index页面
            return_url = request.GET.get(returnUrl, /index/)
            rep = redirect(return_url)  # rep就是响应对象
            # 判断是否记住密码
            if is_rem:
                # 是就保存七天
                rep.set_cookie(xm, sb, max_age=60*60*24*7)
            else:
                # 不是就不保存
                rep.set_cookie(xm, sb)  # 告诉浏览器在自己本地保存一个键值对
            return rep
        else:
            return render(request, login.html, {error_msg: 用户名或者密码错误})


# 首页
@check_login
def index(request):
    publisher_list = Publisher.objects.all()
    return render(request, index.html, {publisher_list: publisher_list})


# 删除出版社
def delete_publisher(request):
    delete_id = request.POST.get(id)
    res = {code: 0}
    try:
        Publisher.objects.filter(id=delete_id).delete()
    except Exception as e:
        res[code] = 1
        res[err_msg] = str(e)
    return JsonResponse(res)


@check_login
def home(request):
    return HttpResponse(home)


# 注销
def logout(request):
    rep = redirect(/login/)
    rep.delete_cookie(xm)
    return rep
View Code

 

 

AJAX异步、sweetalert和Cookie初识

标签:from   模拟   objects   时间   isp   span   提示   pid   func   

原文地址:https://www.cnblogs.com/Zzbj/p/9955070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!