版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
web开发与Django的Ajax
一、Ajax介绍
ajax异步的js和xml
普通请求：会鞋带整个页面提交，最明显的特征刷新页面，页面重置。好多静态资源，页面不需要刷新，并且刷新的时候可能阻塞整个服务。
缺点：
- 用户体验差
- 请求内容和响应内容冗余
基于上面的问题，Ajax出现了
- Ajax能够发送局部的请求，页面整体不刷新，只是局部刷新
- Ajax可以发送一个异步请求，请求的过程中不会阻塞整个服务
Ajax Google公司
Ajax需要使用js语法编写，原生的js比较复杂，因为各种浏览器都对Ajax的兼容不一样，使用js编写Ajax，首先需要完成各个浏览器对js的实例创建，我们使用jq封装过的Ajax。
二、Ajax请求
（一）导包jq
（二）Ajax完成一个get请求
需要两个视图
- 完成获取页面的功能
- 接收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(data){ //请求报错之后执行
}
}
)
}
)
</script>
完成用户名，密码校验的功能
模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajaxget请求</title>
<script src="/static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form>
姓名：<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="提交">
{# <button id="check_value">提交</button>#}
</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>
</body>
</html>
视图：
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'] = '用户不存在或者密码错误'
# result['content'] = "成功拿到数据"
# 返回一个json对象
return JsonResponse(result)
# return HttpResponse('这是ajax提交数据')
ajax发送一个get请求
需要两个视图
- 一个提供页面（处理个get请求）
- 返回一个有表单，有ajax请求的页面
- 第二个页面，实收ajax请求，处理请求，返回响应
- 返回响应 jsonResponse对象
（三）Ajax完成一个post请求
ajax_post请求跟get请求一样，需要两个视图，是一个post请求，CSRF的问题
不同的地方：
- get请求拼接路径和参数 /index/?name=zhangsan&age=19
- 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();
// get请求
{#url = "/ajax_post_data/?username="+username+"&password="+password;#}
//post请求
//构造数据字典
send_data = {
"username":username,
"password":password,
"csrfmiddlewaretoken":"{{ csrf_token }}"
};
url = "/ajax_post_data";
$.ajax(
{
url:url,
type:"post",
data:send_data,
seccess:function (data) {
console.log(data);
},
error:function(error){
console.log(error);
}
}
)
}
)
</script>
（四）判断用户是否存在
当时去焦点的时候，判断用户是否存在
- 局部刷新 ajax（写出ajax代码）
- 提交地址（处理业务的视图）
- 视图中，获取传过来的参数，判断用户名是否存在
- 不存在：返回结果
- 存在：返回结果
- 视图中，获取传过来的参数，判断用户名是否存在
- 页面，拿到结果，进行渲染
视图
def ajax_post_data(request):
# 注册
result = {"code":10000,"content":""}
# print(request.POST)
username = request.POST.get('username')
password = request.POST.get('password')
# 注册
if username is None or password is None:
result['code'] = 10001
result['content'] = '请求参数为空'
else:
# 添加用户
user = User()
user.name = username
user.password=setPassword(password)
try:
user.save()
result["code"] = 1000
result['content'] = '添加数据成功'
except:
result['code'] = 1002
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)
模板：
<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();
// get请求
{#url = "/ajax_post_data/?username="+username+"&password="+password;#}
//post请求
//构造数据字典
send_data = {
"username":username,
"password":password,
"csrfmiddlewaretoken":"{{ csrf_token }}"
};
url = "/ajax_post_data/";
$.ajax(
{
url:url,
type:"post",
data:send_data,
success:function (data) {
console.log(data);
console.log(data.content);
console.log(data.code);
},
error:function(error){
console.log(error);
}
}
)
}
)
</script>
添加成功：
用户名已存在：
cookie和session
由于http请求是无状态的，无法记录身份，所以需要一种机制能够长期的记录身份，最早出现的就是cookie。
cookie：是由服务器下发给用户的，保存在用户的浏览器上，用于校验身份的数据，cookie工作机制就跟上面的通关文牒一样。
- 用户第一次请求服务器
- 服务器验证用户的用户名、密码，下发cookie
- 用户第二次鞋带cookie请求服务器
- 服务器根据用户携带的cookie确认用户的身份
cookie
- 优点：
- 根本上解决了用户持续访问的问题
- 缺点
- 由于cookie是保存在用户本地，所以导致一些安全问题，cookie可以被修改，还可以被模仿
（一）根据登陆流程认识cookie
- 用户提供用户名，密码进行登陆
- 服务器接收用户名，密码
- 校验用户名，密码filter（username=,password=’’）
- 存在
- 设置cookie，下发cookie
- 登录成功，跳转到首页
- 不存在
- 返回用户不存在
- 存在
（二）cookie的使用
cookie的设置
登录
创建一个login.html
视图：接收数据，处理数据，返回登录结果
首先完成用户登录，跳转到首页
- 视图
- 模板
cookie的设置
cookie设置参数
| 属性 | 含义 |
|---|---|
| key | cookie的键 |
| value=’’ | cookie的值 |
| max_age=None | cookie存在的事件，有效时间 |
| expries=None | cookie的超时时间，跟max_age冲突，两者二选一 |
| path=’/’ | cookie起作用的范围，默认是当前网站 |
| domain=None | cookie起作用的域名 baidu.com |
| secure=False | 如果为True只通过http传递cookie |
| httponly=False | 如果为True只通过http传递cookie |
| samesite=None | 相同的网站（域名），使用cookie |
cookie的获取
