django框架中ajax的使用及避开CSRF 验证的方式详解

更新时间：2019年12月11日 11:17:57 作者：dawn-liu

这篇文章主要介绍了django框架中ajax的使用及避开CSRF 验证的方式,结合实例形式分析了Django框架ajax后台交互与排除验证csrf相关操作技巧,需要的朋友可以参考下

本文实例讲述了django框架中ajax的使用及避开CSRF 验证的方式。分享给大家供大家参考，具体如下：

ajax(Asynchronous Javascript And Xml) 异步javascript和XML

ajax的优点

使用javascript技术向服务器发送异步请求

ajax无须刷新整个页面；

由于ajax响应的是局部页面，因此性能要高

当以get的方式向服务器发送请求：

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发送json数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<p>ajax请求</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 () {   //鼠标失去焦点事件
    $.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); //接收传来的信息，进行反序列化，这里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请求</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请求如何避免crsf错误呢
     $("#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 的方法排除验证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  #导入
# 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
      #将用户的权限注册到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("用户名或密码错误")
  @csrf_exempt #当继承django里面的类时，必须要写一个dispath方式，并写在它上面
  def dispatch(self,*args,**kwargs):
    # return super(LoginView,self).dispatch(*args,**kwargs) #这两个方法都可以
    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
      #将用户的权限注册到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("用户名或密码错误")

ajax处理json数据

1 我们在views里面向ajax发送一个json数据

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请求</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"} 类型发生了变化
        console.log(typeof(data)); // object
      },
      error:function(jqXHR,textStatus,err){
        console.log(err); 
        console.log("数据错误。。。。。。。")
      }
    })
  });
</script>

2 向ajax发送一个其他数据时

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"} 类型发生了变化
        console.log(typeof(data)); // object
      },
      error:function(jqXHR,textStatus,err){
        console.log(err);  //报错打印出错误信息
        console.log("数据错误。。。。。。。") //制定错误信息
      }
    })
  });

希望本文所述对大家基于Django框架的Python程序设计有所帮助。

您可能感兴趣的文章:

使用实现XlsxWriter创建Excel文件并编辑
今天小编就为大家分享一篇使用实现XlsxWriter创建Excel文件并编辑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-05-05
nx.adjacency_matrix计算邻接矩阵与真实结果不一致的解决
这篇文章主要介绍了nx.adjacency_matrix计算邻接矩阵与真实结果不一致的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Python常用内建模块hashlib、hmac详解
这篇文章主要介绍了Python常用内建模块hashlib、hmac详解,摘要算法又称哈希算法、散列算法,它通过一个函数，把任意长度的数据转换为一个长度固定的数据串,需要的朋友可以参考下
2023-08-08
python定义类self用法实例解析
这篇文章主要介绍了python定义类self用法实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
Python绘制loss曲线和准确率曲线实例代码
pytorch虽然使用起来很方便,但在一点上并没有tensorflow方便,就是绘制模型训练时在训练集和验证集上的loss和accuracy曲线(共四条),下面这篇文章主要给大家介绍了关于Python绘制loss曲线和准确率曲线的相关资料,需要的朋友可以参考下
2022-08-08
python 实现两个线程交替执行
这篇文章主要介绍了python 实现两个线程交替执行，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-05-05
python实现Simhash算法
这篇文章主要介绍了python实现Simhash算法，simhash算法用来进行文本比对的，simhash包含分词、hash、加权、合并、降维五大步骤，下文围绕更多相关资料介绍，需要的小伙伴可以参考一下
2022-02-02
Python3内置模块random随机方法小结
这篇文章主要介绍了Python3内置模块random随机方法小结，random是Python中与随机数相关的模块，其本质就是一个伪随机数生成器，我们可以利用random模块基础生成各种不同的随机数，以及一些基于随机数的操作,需要的朋友可以参考下
2019-07-07
numpy.linspace函数具体使用详解
这篇文章主要介绍了numpy.linspace具体使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
python数据结构之链表的实例讲解
下面小编就为大家带来一篇python数据结构之链表的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07

django框架中ajax的使用及避开CSRF 验证的方式详解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具