标签: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), ]
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>
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‘)
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>
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)
三、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>
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
标签:from 模拟 objects 时间 isp span 提示 pid func
原文地址:https://www.cnblogs.com/Zzbj/p/9955070.html