django框架中ajax的使用及避開(kāi)CSRF 驗(yàn)證的方式詳解

發(fā)布時(shí)間：2020-08-29 04:58:00 來(lái)源：腳本之家閱讀：139 作者：dawn-liu 欄目：開(kāi)發(fā)技術(shù)

本文實(shí)例講述了django框架中ajax的使用及避開(kāi)CSRF 驗(yàn)證的方式。分享給大家供大家參考，具體如下：

ajax(Asynchronous Javascript And Xml) 異步j(luò)avascript和XML

ajax的優(yōu)點(diǎn)

使用javascript技術(shù)向服務(wù)器發(fā)送異步請(qǐng)求

ajax無(wú)須刷新整個(gè)頁(yè)面；

由于ajax響應(yīng)的是局部頁(yè)面，因此性能要高

當(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); //接收傳來(lái)的信息，進(jìn)行反序列化，這里JSON要輸入大寫否則出不來(lái)
        console.log(data);
        console.log(typeof data);
        if (!data.state) {
          $(".error").html(data.msg).css("color", "red") #這里的css樣式是以，隔開(kāi)的
        }
      }
    })
  });</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>

下面是效果

django框架中ajax的使用及避開(kāi)CSRF 驗(yàn)證的方式詳解

如何不用上面的方式，也可以通過(guò)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>
//沒(méi)有指定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ì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

django框架中ajax的使用及避開(kāi)CSRF 驗(yàn)證的方式詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽