一、AJAX的异步示例1. urls.py
from django.conf.urls import urlfrom apptest import viewsurlpatterns = [ ???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.js2、示例(此处只是实现了删除的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)三、Cookie1、介绍1.Cookie的由来大家都知道HTTP协议是无状态的。无状态的意思是每次请求都是独立的，它的执行情况和结果与前面的请求和之后的请求都无直接关系，它不会受前面的请求响应情况直接影响，也不会直接影响后面的请求响应情况。一句有意思的话来描述就是人生只如初见，对服务器来说，每次的请求都是全新的。状态可以理解为客户端和服务器在某次会话中产生的数据，那无状态的就以为这些数据不会被保留。会话中产生的数据又是我们需要保存的，也就是说要“保持状态”。因此Cookie就是在这样一个场景下诞生。2.什么是CookieCookie具体指的是一段小信息，它是服务器发送出来存储在浏览器上的一组组键值对，下次访问服务器时浏览器会自动携带这些键值对，以便服务器提取有用信息。简单点说，Cookie就是服务端给浏览器的小纸条！保存在浏览器端的键值对。3.Cookie的原理cookie的工作原理是：由服务器产生内容，浏览器收到请求后保存在本地；当浏览器再次访问时，浏览器会自动带上Cookie，这样服务器就能通过Cookie的内容来判断这个是“谁”了。2、Django中操作Cookie1.设置Cookierep = 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.删除Cookiedef logout(request): ???rep = redirect("/login/") ???rep.delete_cookie("user") ?# 删除用户浏览器上之前设置的usercookie值 ???return rep3、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, redirectfrom functools import wrapsfrom django import viewsfrom 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_logindef 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_logindef home(request): ???return HttpResponse(‘home‘)# 注销def logout(request): ???rep = redirect(‘/login/‘) ???rep.delete_cookie(‘xm‘) ???return repAJAX异步、sweetalert和Cookie初识
原文地址：https://www.cnblogs.com/Zzbj/p/9955070.html