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


Posted in Python onDecember 11, 2019

本文实例讲述了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>

下面是效果

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

如何不用上面的方式,也可以通过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程序设计有所帮助。

Python 相关文章推荐
python实现socket端口重定向示例
Feb 10 Python
python 打印出所有的对象/模块的属性(实例代码)
Sep 11 Python
Python scikit-learn 做线性回归的示例代码
Nov 01 Python
Python排序搜索基本算法之希尔排序实例分析
Dec 09 Python
详解TensorFlow在windows上安装与简单示例
Mar 05 Python
python 实现登录网页的操作方法
May 11 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
Aug 10 Python
Python模块汇总(常用第三方库)
Oct 07 Python
Python SELENIUM上传文件或图片实现过程
Oct 28 Python
python中selenium库的基本使用详解
Jul 31 Python
在Python中字典按值排序的实现方法
Nov 12 Python
python基于opencv批量生成验证码的示例
Apr 28 Python
通过实例解析Python调用json模块
Dec 11 #Python
Flask中endpoint的理解(小结)
Dec 11 #Python
Python中Flask-RESTful编写API接口(小白入门)
Dec 11 #Python
Python zip函数打包元素实例解析
Dec 11 #Python
基于Python实现扑克牌面试题
Dec 11 #Python
Python如何使用argparse模块处理命令行参数
Dec 11 #Python
opencv3/C++ 平面对象识别&amp;透视变换方式
Dec 11 #Python
You might like
php注销代码(session注销)
2012/05/31 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
对联广告js flash激活
2006/10/19 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
国际领先的学术出版商:Springer
2017/01/11 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
自主招生自荐信
2013/12/08 职场文书
中学运动会广播稿
2014/01/19 职场文书
捐款倡议书范文
2014/02/02 职场文书
初三学生个人自我评定
2014/04/06 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
小学生作文批改评语
2014/12/25 职场文书
2015大学生求职信范文
2015/03/20 职场文书
工作证明书
2015/06/15 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书