首页 / AJAX / AJAX异步、sweetalert和Cookie初识

AJAX异步、sweetalert和Cookie初识

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AJAX异步、sweetalert和Cookie初识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9885字，纯文字阅读大概需要15分钟。

内容图文

            一、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. 先找到当前行后面所有的trvar 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.获取Cookieset_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

 

 

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

内容总结

以上是互联网集市为您收集整理的AJAX异步、sweetalert和Cookie初识全部内容，希望文章能够帮你解决AJAX异步、sweetalert和Cookie初识所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1101492.html

来源：【匿名】