文章目录
ajax(Asynchronous Javascript And Xml)异步javascript和XML。本文实例讲述了django框架中ajax的使用及避开CSRF 验证的方式。
ajax的优点
- 使用javascript技术向服务器发送异步请求
- ajax无须刷新整个页面；
- 由于ajax响应的是局部页面，因此性能要高
向服务器发送GET请求
views.py
from django.http import HttpResponse
from django.shortcuts import render
def get_html(request):
return render(request, 'ajax/test_ajax.html')
def test_ajax_get(request):
name = request.GET.get("name", '')
print(name)
if name:
res = {"code": "200", "msg": "√"}
else:
res = {"code": "000", "msg": "请输入用户名"}
import json
return HttpResponse(json.dumps(res)) # 向ajax发送json数据
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>
<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script>
$("#user").blur(function () { //鼠标失去焦点事件
$.ajax({
url: "/ajax_test/get_/",
type: "get",
data: {"name": $("#user").val()},
success: function (data) {
console.log(data);
console.log(typeof data);
var data = JSON.parse(data); //接收传来的信息，进行反序列化，这里JSON要输入大写否则出不来
console.log(data);
console.log(typeof data);
if (data.code == "200") {
$(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
}
else{
$(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
}
}
})
});
</script>
</body>
</html>
向服务器发送POST请求
以post的方式提交，存在crsf的问题，解决跨域伪造csrf的方法有三种
CSRF 简介
CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。攻击者通过 HTTP 请求江数据传送到服务器，从而盗取回话的 cookie。盗取回话 cookie 之后，攻击者不仅可以获取用户的信息，还可以修改该 cookie 关联的账户信息。
所以解决 CSRF 攻击的最直接的办法就是生成一个随机的 csrftoken 值，保存在用户的页面上，每次请求都带着这个值过来完成校验。
通过 csrf_token 认证
方式 1 通过 input 标签获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<input type="text" name="csrfmiddlewaretoken" value="{{ csrf_token }}" hidden>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>
<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script>
// var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
//下面改成post请求如何避免crsf错误呢
$("#user").blur(function () {
$.ajax({
url: "/ajax_test/post_/",
type: "post",
data: {
"name": $("#user").val(),
"csrfmiddlewaretoken": $('[name="csrfmiddlewaretoken"]').val(),
// "csrfmiddlewaretoken": "{{csrf_token}}" // 直接也可以
},
success: function (data) {
console.log(data);
console.log(typeof data);
var data = JSON.parse(data);
console.log(data);
console.log(typeof data);
if (data.code == "200") {
$(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
}
else {
$(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
}
}
})
});
</script>
</body>
</html>
方式 2 通过 Cookie 获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<input type="text" name="csrfmiddlewaretoken" value="{{ csrf_token }}" hidden>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>
<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script>
//下面改成post请求如何避免crsf错误呢
$("#user").blur(function () {
$.ajax({
url: "/ajax_test/post_/",
type: "post",
data: {
"name": $("#user").val(),
headers: {"X-CSRFToken": $.cookie('csrftoken')}, //方式三
},
success: function (data) {
console.log(data);
console.log(typeof data);
var data = JSON.parse(data);
console.log(data);
console.log(typeof data);
if (data.code == "200") {
$(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
}
else {
$(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
}
}
})
});
</script>
</body>
</html>
视图层或者urls添加装饰器
views.py
from django.views.decorators.csrf import csrf_exempt # 导入
@csrf_exempt
def test_ajax_post(request):
name = request.POST.get("name", '')
print(name)
if name:
res = {"code": "200", "msg": "√"}
else:
res = {"code": "000", "msg": "请输入用户名"}
import json
return HttpResponse(json.dumps(res)) # 向ajax发送json数据
或者urls.py
from django.urls import path
from django.views.decorators.csrf import csrf_exempt # 导入
from ajax import views
urlpatterns = [
path('post_/', csrf_exempt(views.test_ajax_post)),
]