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的内容