django框架中ajax的使用及避開CSRF 驗(yàn)證的方式詳解
更新時(shí)間：2019年12月11日 11:17:57 作者：dawn-liu
這篇文章主要介紹了django框架中ajax的使用及避開CSRF 驗(yàn)證的方式,結(jié)合實(shí)例形式分析了Django框架ajax后臺(tái)交互與排除驗(yàn)證csrf相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了django框架中ajax的使用及避開CSRF 驗(yàn)證的方式。分享給大家供大家參考，具體如下：
ajax(Asynchronous Javascript And Xml) 異步j(luò)avascript和XML
ajax的優(yōu)點(diǎn)
使用javascript技術(shù)向服務(wù)器發(fā)送異步請(qǐng)求
ajax無須刷新整個(gè)頁面；
由于ajax響應(yīng)的是局部頁面，因此性能要高
當(dāng)以get的方式向服務(wù)器發(fā)送請(qǐng)求：
views.py
def user_valid(request):
name=request.GET.get("name")
ret=Author.objects.filter(name=name)
res={"state":True,"msg":""}
if ret:
res["state"]=False
res["msg"]="用戶存在"
import json
return HttpResponse(json.dumps(res)) #向ajax發(fā)送json數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>ajax請(qǐng)求</p>
<button class="s1">send_ajax</button>
<p class="con"></p>
<hr><p>用戶名：<input type="text" id="user"><span class="error"></span></p>
<script src="/static/js/jquery-3.3.1.min.js">
</script>
<script>
$(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
type:"get",
data:{},
success:function(data){
$(".con").html(data)
}
})
});
$("#user").blur(function () { //鼠標(biāo)失去焦點(diǎn)事件
$.ajax({
url: "/user_valid/",
type: "get",
data: {"name": $("#user").val()},
success: function (data) {
console.log(data);
console.log(typeof data);
var data = JSON.parse(data); //接收傳來的信息，進(jìn)行反序列化，這里JSON要輸入大寫否則出不來
console.log(data);
console.log(typeof data);
if (!data.state) {
$(".error").html(data.msg).css("color", "red") #這里的css樣式是以，隔開的
}
}
})
});</script>
</body>
</html>
下面是以post的方式提交，并且跨域偽造csrf的方式（三種）
def user_valid(request):
name = request.POST.get("name")
ret=Author.objects.filter(name=name)
res={"state":True,"msg":""}
if ret:
res["state"]=False
res["msg"]="用戶存在"
import json
return HttpResponse(json.dumps(res))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>ajax請(qǐng)求</p>
<button class="s1">send_ajax</button>
<p class="con"></p>
<hr>
{% csrf_token %} #方式一
<p>用戶名：<input type="text" id="user"><span class="error"></span></p>
<script src="/static/js/jquery-3.3.1.min.js">
</script>
<script>
$(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
type:"get",
data:{},
success:function(data){
$(".con").html(data)
}
})
});
//下面改成post請(qǐng)求如何避免crsf錯(cuò)誤呢
$("#user").blur(function () {
$.ajax({
url: "/user_valid/",
type: "post",
data: {"name": $("#user").val(),
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").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.state) {
$(".error").html(data.msg).css("color", "red")
}
}
})
});
</script>
</body>
</html>
下面是效果
如何不用上面的方式，也可以通過csrf中的csrf_exempt 的方法排除驗(yàn)證csrf
方式一：在views.py里面修改
#urls.py里面 url(r'^login/$',views.LoginView.as_view()),
#views.py
from django.shortcuts import render,HttpResponse,redirect
from django.views.decorators.csrf import csrf_exempt #導(dǎo)入
# Create your views here.
from rbac.models import UserInfo
from django.views import View
class LoginView(View):
def get(self,request):
return render(request,"login.html")
def post(self,request):
user=request.POST.get("user")
pwd=request.POST.get("pwd")
user=UserInfo.objects.filter(name=user,pwd=pwd).first()
print(user,user.pk)
if user:
request.session["user_id"]=user.pk
#將用戶的權(quán)限注冊(cè)到session中
permission_list=[]
ret=user.roles.all().values("permissions__url").distinct()
for per in ret:
permission_list.append(per.get("permissions__url"))
# print(ret)
request.session["permission_list"]=permission_list
return HttpResponse("ok")
return HttpResponse("用戶名或密碼錯(cuò)誤")
@csrf_exempt #當(dāng)繼承django里面的類時(shí)，必須要寫一個(gè)dispath方式，并寫在它上面
def dispatch(self,*args,**kwargs):
# return super(LoginView,self).dispatch(*args,**kwargs) #這兩個(gè)方法都可以
return super().dispatch(*args, **kwargs)
方式二：加入到urls里面
# urls from django.views.decorators.csrf import csrf_exempt url(r'^login/$',csrf_exempt(views.LoginView.as_view())), #加入到urls里面
#views.py
from django.shortcuts import render,HttpResponse,redirect
# Create your views here.
from rbac.models import UserInfo
from django.views import View
class LoginView(View):
def get(self,request):
return render(request,"login.html")
def post(self,request):
user=request.POST.get("user")
pwd=request.POST.get("pwd")
user=UserInfo.objects.filter(name=user,pwd=pwd).first()
print(user,user.pk)
if user:
request.session["user_id"]=user.pk
#將用戶的權(quán)限注冊(cè)到session中
permission_list=[]
ret=user.roles.all().values("permissions__url").distinct()
for per in ret:
permission_list.append(per.get("permissions__url"))
# print(ret)
request.session["permission_list"]=permission_list
return HttpResponse("ok")
return HttpResponse("用戶名或密碼錯(cuò)誤")
ajax處理json數(shù)據(jù)
1 我們?cè)趘iews里面向ajax發(fā)送一個(gè)json數(shù)據(jù)
def send_ajax(request):
import json
return HttpResponse(json.dumps({"name":"xinxin"}))
#index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>ajax請(qǐng)求</p>
<button class="s1">send_ajax</button>
<p class="con"></p>
<hr>
{% csrf_token %}
<p>用戶名：<input type="text" id="user"><span class="error"></span></p>
<script src="/static/js/jquery-3.3.1.min.js">
</script>
<script>
//沒有指定dataType的情況
/* $(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
success:function(data){
console.log(data); //{"name": "xinxin"}
console.log(typeof(data)); //string
}
})
});*/
//指定dataType的情況
$(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
dataType:"json", //主要T要大寫
success:function(data){
console.log(data); //Object {name: "xinxin"} 類型發(fā)生了變化
console.log(typeof(data)); // object
},
error:function(jqXHR,textStatus,err){
console.log(err);
console.log("數(shù)據(jù)錯(cuò)誤。。。。。。。")
}
})
});
</script>
2 向ajax發(fā)送一個(gè)其他數(shù)據(jù)時(shí)
def send_ajax(request):
return HttpResponse("{'name':'xinxin'}")
#index.html
//指定dataType的情況
$(".s1").click(function(){
$.ajax({
url:"/send_ajax/",
dataType:"json", //主要T要大寫
success:function(data){
console.log(data); //Object {name: "xinxin"} 類型發(fā)生了變化
console.log(typeof(data)); // object
},
error:function(jqXHR,textStatus,err){
console.log(err); //報(bào)錯(cuò)打印出錯(cuò)誤信息
console.log("數(shù)據(jù)錯(cuò)誤。。。。。。。") //制定錯(cuò)誤信息
}
})
});
希望本文所述對(duì)大家基于Django框架的Python程序設(shè)計(jì)有所幫助。
相關(guān)文章
使用實(shí)現(xiàn)XlsxWriter創(chuàng)建Excel文件并編輯
今天小編就為大家分享一篇使用實(shí)現(xiàn)XlsxWriter創(chuàng)建Excel文件并編輯，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-05-05
nx.adjacency_matrix計(jì)算鄰接矩陣與真實(shí)結(jié)果不一致的解決
這篇文章主要介紹了nx.adjacency_matrix計(jì)算鄰接矩陣與真實(shí)結(jié)果不一致的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Python常用內(nèi)建模塊hashlib、hmac詳解
這篇文章主要介紹了Python常用內(nèi)建模塊hashlib、hmac詳解,摘要算法又稱哈希算法、散列算法,它通過一個(gè)函數(shù)，把任意長度的數(shù)據(jù)轉(zhuǎn)換為一個(gè)長度固定的數(shù)據(jù)串,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了python定義類self用法實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
Python繪制loss曲線和準(zhǔn)確率曲線實(shí)例代碼
pytorch雖然使用起來很方便,但在一點(diǎn)上并沒有tensorflow方便,就是繪制模型訓(xùn)練時(shí)在訓(xùn)練集和驗(yàn)證集上的loss和accuracy曲線(共四條),下面這篇文章主要給大家介紹了關(guān)于Python繪制loss曲線和準(zhǔn)確率曲線的相關(guān)資料,需要的朋友可以參考下2022-08-08
python 實(shí)現(xiàn)兩個(gè)線程交替執(zhí)行
這篇文章主要介紹了python 實(shí)現(xiàn)兩個(gè)線程交替執(zhí)行，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-05-05
這篇文章主要介紹了python實(shí)現(xiàn)Simhash算法，simhash算法用來進(jìn)行文本比對(duì)的，simhash包含分詞、hash、加權(quán)、合并、降維五大步驟，下文圍繞更多相關(guān)資料介紹，需要的小伙伴可以參考一下2022-02-02
Python3內(nèi)置模塊random隨機(jī)方法小結(jié)
這篇文章主要介紹了Python3內(nèi)置模塊random隨機(jī)方法小結(jié)，random是Python中與隨機(jī)數(shù)相關(guān)的模塊，其本質(zhì)就是一個(gè)偽隨機(jī)數(shù)生成器，我們可以利用random模塊基礎(chǔ)生成各種不同的隨機(jī)數(shù)，以及一些基于隨機(jī)數(shù)的操作,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了numpy.linspace具體使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
python數(shù)據(jù)結(jié)構(gòu)之鏈表的實(shí)例講解
下面小編就為大家?guī)硪黄猵ython數(shù)據(jù)結(jié)構(gòu)之鏈表的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07