2018-9-20 14:19:55
2018-9-20 21:33:05
周末可以帮我图书商城再次优化一下!!
加入 Ajax请求,,再加上 sweetAlert 甜蜜对话框插件!
要是再加上模态框 就是太完美了!!
前端用js Ajax发送数据,后端就接收个请求返回东西就好了!
明天继续!
越努力,越幸运!
参考连接:http://www.cnblogs.com/liwenzhou/p/8718861.html
js中的 json 对象转换
bootstrap-sweetalet 使用 连接: https://github.com/lipis/bootstrap-sweetalert
里面的
就这来有用!
Ajax.py demo
from django.shortcuts import render, HttpResponse # Create your views here. def index(request): return render(request, "index.html") def ajax_add(request): print(request.GET) print(request.GET.get("i1")) print(request.GET.get("i2")) i1 = int(request.GET.get("i1")) i2 = int(request.GET.get("i2")) # i1 = request.GET.get("i1") # i2 = request.GET.get("i2") # # i1 = int(i1) # i2 = int(i2) # print(i1, i2) # print("=" * 120) # ret = i1 + i2 ret = i1 + i2 return HttpResponse(ret) def ajax_add3(request): print(request.POST) print("-" * 120) i1 = int(request.POST.get("i1")) i2 = int(request.POST.get("i2")) # i1 = request.GET.get("i1") # i2 = request.GET.get("i2") # # i1 = int(i1) # i2 = int(i2) # print(i1, i2) # print("=" * 120) # ret = i1 + i2 ret = i1 + i2 return HttpResponse(ret) def test(request): # import time # time.sleep(5) url = "http://p7.yokacdn.com/pic/YOKA_HZP/2018-01-19/U10089P42TS1516351813_11903.jpg" # return HttpResponse(url) # return render(request, "index.html") return HttpResponse("http://www.luffycity.com") from app01 import models def persons(request): ret = models.Person.objects.all() # person_list = [] # for i in ret: # person_list.append({"name": i.name, "age": i.age}) # print(person_list) # import json # s = json.dumps(person_list) # print(s) # from django.core import serializers # s = serializers.serialize("json", ret) # print(s) # return HttpResponse(s) return render(request, "sweetalert_demo.html", {"persons": ret}) def delete(request): import time time.sleep(3) del_id = request.POST.get("id") models.Person.objects.filter(id=del_id).delete() return HttpResponse("删除成功！")
sweetalert_demol.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sweetalert_demo</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/static/sweetalert/sweetalert.css"> <style> .sweet-alert>h2 { padding-top: 15px; } </style> </head> <body> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">person管理</h3> </div> <div class="panel-body"> <table class="table table-bordered"> <thead> <tr> <th>序号</th> <th>id</th> <th>name</th> <th>age</th> <th>生日</th> <th>操作</th> </tr> </thead> <tbody> {% for p in persons %} <tr> <td>{{ forloop.counter }}</td> <td>{{ p.id }}</td> <td>{{ p.name }}</td> <td>{{ p.age }}</td> <td>{{ p.birthday|date:'Y-m-d' }}</td> <td> <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button> </td> </tr> {% endfor %} </tbody> </table> </div> </div> </div> <script src="/static/jquery-3.3.1.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script src="/static/sweetalert/sweetalert.min.js"></script> <script src="/static/setupajax.js"></script> <script> // 找到删除按钮绑定事件 $(".del").on("click", function () { var $trEle = $(this).parent().parent(); var delId = $trEle.children().eq(1).text(); swal({ title: "你确定要删除吗？", text: "一旦删除就找不回来了", type: "warning", showCancelButton: true, confirmButtonClass: "btn-warning", confirmButtonText: "确认", cancelButtonText: "取消", closeOnConfirm: false, showLoaderOnConfirm: true }, function(){ // 向后端发送删除的请求 $.ajax({ url: "/delete/", type: "post", data: {"id":delId}, success:function (arg) { swal(arg, "你可以跑路了！", "success"); $trEle.remove(); } }); }); }) </script> </body> </html>
$(".btn-danger").on("click", function () { swal({ title: "你确定要删除吗？", text: "删除可就找不回来了哦！", type: "warning", showCancelButton: true, confirmButtonClass: "btn-danger", confirmButtonText: "删除", cancelButtonText: "取消", closeOnConfirm: false }, function () { var deleteId = $(this).parent().parent().attr("data_id"); $.ajax({ url: "/delete_book/", type: "post", data: {"id": deleteId}, success: function (data) { if (data.status === 1) { swal("删除成功!", "你可以准备跑路了！", "success"); } else { swal("删除失败", "你可以再尝试一下！", "error") } } }) }); })
day72 2018-05-16 1. 内容回顾 1. Cookie是什么 保存在浏览器端的键值对 为什么要有Cookie? 因为HTTP请求是无状态的 Cookie的原理？ 服务端可以在返回响应的时候 做手脚 在浏览器上写入键值对（Cookie） 浏览器发送请求的时候会自动携带该网站保存在我浏览器的键值对（Cookie） Django 从请求携带的Cookie中取值： request.COOKIES.get("is_login") request.get_signed_cookie(key, default=None, salt="xxx") Django中设置Cookie:(针对的是响应对象) rep = HttpResponse()/render(request, "test.html)/redirect() rep.set_signed_cookie(key, value, salt="xxx", max_age=7) Django中删除Cookie:(注销) rep.delete_cookie(key) 2. Session是什么 Session保存在服务端的键值对 Session依赖于Cookie dsadasdsadsafsjkndf: {"is_login": 1, "name": "xiaohei", "age":18} dsaasdaknfgreryywdf: {"is_login": 1, "name": "xiaobai", "age":20} wqrqrteknfgzddasqfg: {"is_login": 0, "name": "xiaohui", "age":48} 给浏览器写入Cookie: sessionid:wqrqrteknfgzddasqfg 1. 从用户发来的请求的Cookie中 根据 sessionid 取值， 取到 wqrqrteknfgzddasqfg 2. 根据特殊字符串找到对应的 Session 数据 --> {"is_login": 0, "name": "xiaohui", "age":48} 3. request.session.get("is_login") --> 从Session取值 Django中设置Session: request.session["is_login"] = 1 request.session.set_expiry(7) # 设置超时时间 (Cookie和Session数据的) 在settings.py中设置，每次请求都刷新Session超时时间 SESSION_SAVE_EVERY_REQUEST = True Django中删除Session: request.session.flush() 清除Cookie和Session数据 request.session.clear_expired() 将所有Session失效日期小于当前日期的数据删除 2. 今日内容 AJAX 1. 预备知识 JSON 2. 我们之前已经学过的发请求的方式： 1. 直接在地址栏输入URL回车 GET请求 2. a标签 GET请求 3. form表单 GET/POST请求 4. AJAX GET/POST请求 3. AJAX 特点： 1. 异步 2. 局部刷新浏览器（偷偷发请求） 3. 今日作业 绝知此事要躬行！！！ 1. 检测用户名是否已经存在！ 2. 把Sweetalet插件 3. 复习jQuery的内容