1、ajax介绍
ajax异步的js和xml
普通请求:会携带整个页面提交,最明显的特征刷新页面,页面重置。好多的静态资源页面不需要刷新,并且刷新的时候可能阻塞整个服务。
缺点:
- 用户体验特别差
- 请求内容和响应内容冗余
基于上面的问题,ajax出现了
- ajax能够发送局部的请求,页面整体不刷新,只是局部刷新
- ajax可以发送一个异步请求,请求的过程中不会阻塞整个服务
ajax google公司
ajax需要使用js语法编写,原生的js比较复杂,因为各种浏览器都对ajax兼容性不一样,使用js编写ajax,首先需要完成各个浏览器对js的实例创建,我们使用jq封装过的ajax
2、ajax请求
1、导包jq
2、ajax完成一个get请求
需要两个视图
1、完成获取页面的功能
2、接收ajax提交的请求,返回响应
ajax的结构
<script>
//通过浏览器 $("#id1").val() 获取值 $("#id2").click()
$("#check_value").click(
function(){
username = $("#username").val(); //获取姓名的值
password = $("#password").val(); //获取密码的值
$.ajax( //ajax 发起一个ajax请求
{ //ajax请求的数据需要放在一个对象中
url:'', //ajax请求的路径
type:'', //ajax请求的类型
data:'', //ajax请求的数据 在post请求中 去填写
success:function(data){ //请求成功之后执行的 data接口返回数据
},
error:function(error){ //请求报错之后执行
}
}
)
}
)
完成用户名,密码校验的功能
模板:
<script src="/static/shop/js/jquery.min.js"></script>
</head>
<body>
<form action="">
姓名<input id="username" type="text" name="username">
密码<input id="password" type="password" name="password">
<input id="check_value" type="button" value="提交">
</form>
<script>
// 通过 选择器 $("#id1").val() 获取值 $("#id2").click()
$("#check_value").click(
function () {
username = $("#username").val(); // 获取姓名的值
password = $("#password").val(); // 获取密码的值
url = "/ajax_get_data/?username=" +username + "&password=" + password
$.ajax( // ajax 发起一个ajax请求
{ // ajax请求的数据需要放在一个对象中
url:url, // ajax 请求的路径
type:'get', // ajax 请求的类型
data:'', // ajax 请求的数据 在post请求中 去填写
success:function (data) { // 请求成功之后执行的 data 接口返回的数据
console.log(data);
console.log(data.content);
console.log(data.code);
},
error:function (error) { // 请求报错之后执行
}
}
)
}
)
</script>
视图:
from django.http import JsonResponse
def ajax_get(request):
return render(request,"ajax_get.html")
## ajax 完成一个 校验用户名 密码的案例
def ajax_get_data(request):
result = {"code":10000,"content":""}
data = request.GET
username = data.get("username")
password = data.get("password")
if username is None or password is None:
result['code'] = 10001
result['content'] = "请求参数为空"
else:
user = User.objects.filter(name=username,password=setPassword(password)).first()
if user:
result['code'] = 10000
result['content'] = "用户可登陆"
else:
result['code'] = 10002
result['content'] = "用户不存在或者密码不正确"
## 返回一个json对象
return JsonResponse(result)
# return HttpResponse("这个是ajax提交数据")
ajax发送一个get请求
需要两个视图
1、一个视图提供页面(处理get请求)
返回一个有表单,有ajax请求的页面
2、第二个视图 接收ajax请求,处理请求,返回响应
jsonresponse对象
3、ajax完成一个post请求
ajax_post请求跟get请求一样,需要两个视图,是一个post请求,CSRF的问题
不同的地方:
- get请求拼接路径和参数 /index/?name=zhangsan&age=18
- get请求中的type=get
- post构造数据字典
- type=post
- 构造字典的时候需要添加csrf
模板
<form action="" method="post">
{% csrf_token %}
名字:<input id = "username" type="text" name="username"><br>
密码:<input id = "password" type="password" name="password"><br>
{# <input type="submit" value="提交">#}
<input id = "check_value" type="button" value="提交">
</form>
<script>
$("#check_value").click(
function () {
// 获取值
username = $("#username").val();
password = $("#password").val();
//url = "/ajax_post_data/?username="+username+"&password=" + password;
// 构造数据字典
send_data = {
"username":username,
"password":password,
"csrfmiddlewaretoken":"{{ csrf_token }}",
};
console.log(send_data)
url = "/ajax_post_data/";
$.ajax(
{
url:url,
type:"post",
data:send_data,
success:function (data) {
console.log(data);
},
error:function (error) {
console.log(error);
}
}
)
}
)
</script>
视图
判断用户是否存在
当失去焦点的时候,判断用户是否存在
- 局部刷新 ajax
- 提交地址(处理业务的视图)
- 视图中 获取传过来的参数,判断用户是否存在
- 不存在:返回结果
- 存在:返回结果
- 页面,拿到结果,进行渲染
视图:
def ajax_post_data(request):
## 注册
result = {}
username = request.POST.get("username")
password = request.POST.get("password")
if len(username) == 0 or len(password) == 0:
result["code"] = 10001
result["content"] = '请求参数为空'
else:
## 添加用户
user= User()
user.name = username
user.password= setPassword(password)
try:
user.save()
result["code"] = 10000
result["content"] = '添加数据成功'
except:
result["code"] = 10002
result["content"] = '添加数据错误'
## 注册
return JsonResponse(result)
## 校验用户名是否存在
def checkusername(request):
result = {'code':10001,"content":""}
#get 请求
username= request.GET.get("name")
print (username)
# 判断用户是否存在
user = User.objects.filter(name=username).first()
if user:
## 存在
result = {'code': 10001, "content": "用户名已存在"}
else:
result = {'code': 10000, "content": "用户名不存在"}
return JsonResponse(result)
模板
<body>
<form action="" method="post">
{% csrf_token %}
名字:<input id = "username" type="text" name="username"><br>
密码:<input id = "password" type="password" name="password"><br>
{# <input type="submit" value="提交">#}
<input id = "check_value" type="button" value="提交">
</form>
<p id="text"></p>
<script>
$("#username").blur(
function () {
username = $("#username").val();
url = '/checkusername/?name='+username
$.ajax(
{
url:url,
type:'get',
data:'',
success:function (data) {
$("#text").text(data.content);
},
error:function (error) {
$("#text").text(error);
}
}
)
}
)
$("#check_value").click(
function () {
// 获取值
username = $("#username").val();
password = $("#password").val();
//url = "/ajax_post_data/?username="+username+"&password=" + password;
// 构造数据字典
send_data = {
"username":username,
"password":password,
"csrfmiddlewaretoken":"{{ csrf_token }}",
};
console.log(send_data)
url = "/ajax_post_data/";
$.ajax(
{
url:url,
type:"post",
data:send_data,
success:function (data) {
console.log(data);
console.log(data.content);
$("#text").text(data.content);
},
error:function (error) {
console.log(error);
}
}
)
}
)
</script>
cookie和seeion
由于http请求是无状态的,无法记录身份,所以需要一种机制能够长期的记录身份,最早出现的就是cookie
cookie:是由服务器下发给用户的,保存在用户的浏览器上面,用于校验身份的数据,cookie工作机制就是跟通关文牒一样
1、用户第一次请求服务器
服务器验证用户的用户名,密码,下发cookie
2、用户第二次携带cookie请求服务器
服务器根据用户携带的cookie确认用户的身份
cookie的
优点:根本上解决了用户持续访问的问题
缺点:由于cookie是保存在用户本地,所以导致一些安全问题,cookie可以被修改,还可以被模仿
1、根据登录流程认识cookie
1、用户提供用户名,密码进行登录
2、服务器接收用户名,密码
3、校验用户名
用户存在 则校验密码 密码正确 则设置cookie 下发coolie 且登录成功,跳转到首页
密码错误 返回密码错误
用户不存在 返回用户不存在
2、cookie的使用
cookie的设置
登录
创建一个login.html
视图:接收数据,处理数据,返回登录结果
首先完成用户登录,跳转到首页
视图
模板
cookie的设置
cookie设置参数
key cookie的键
value='' cookie的值
max_age=None cookie存在的时间,有效时间
expires=None cookie的超时时间,跟max_age 冲突,两者二选一
path='/' cookie起作用的范围,默认是当前网站
domain=None cookie起作用的域名 baidu.com
secure=False 如果为True使用https传递cookie,默认使用flase
httponly=False 如果为True只通过http传递cookie
samesite=None 相同的网站(域名) 使用cookie
cookie的获取
使用cookie
首页用户登录的情况下能够显示,如果用户没有登录,跳转到login页
登录装饰器
删除cookie
登出
在退出登录的时候,删除用户cookie
session
session是为了解决cookie不安全的问题而提出的一种会话机制
session本身就是一种会话:指一次通信从开始到结束,只有在web开发当中,session才会以会话的机制出现
web的session是将用户的信息存在服务器上面的一种web身份校验技术。session需要结合cookie使用,需要通过cookie给用户下分的id(session_id)然后将用户的具体的信息,保存在服务器上面,通常是在数据库当中
cookie和session的区别
- cookie存放在本地,session放在服务器上面,通常是数据库当中
- 校验cookie速度快,但是安全性不高
- 校验cookie速度慢,但是安全性相对好
session的操作
session的创建
session对象在django当中以一个类字典对象出现,我们可以使用字段的方法对其操作
session的获取
session的删除
## 登出
def logout(request):
response = HttpResponseRedirect("/index/")
response.delete_cookie("username")
## 删除session 目的是 用户再次使用相同的sessionid 进行访问,拿到的session的值是不一样的
# del request.session["username"] ### 删除指定session 删除的是保存在服务器上面session的值
request.session.flush() ## 删除所有的session
return response