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备份文件以及mysql数据库的脚本代码
Jun 10 Python
Python中用format函数格式化字符串的用法
Apr 08 Python
python清除字符串里非字母字符的方法
Jul 02 Python
Python增量循环删除MySQL表数据的方法
Sep 23 Python
python实现画圆功能
Jan 25 Python
Python实现的简单计算器功能详解
Aug 25 Python
通过python将大量文件按修改时间分类的方法
Oct 17 Python
对python3新增的byte类型详解
Dec 04 Python
Python图像处理PIL各模块详细介绍(推荐)
Jul 17 Python
python实现读取excel文件中所有sheet操作示例
Aug 09 Python
Python使用Pandas库常见操作详解
Jan 16 Python
Opencv python 图片生成视频的方法示例
Nov 18 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
用PHP调用数据库的存贮过程!
2006/10/09 PHP
PHP连接access数据库
2008/03/27 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
python自动裁剪图像代码分享
2017/11/25 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
python调用百度语音REST API
2018/08/30 Python
10个Python小技巧你值得拥有
2018/09/29 Python
django-初始配置(纯手写)详解
2019/07/30 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python一些性能分析的技巧
2020/08/30 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
外企测试工程师面试题
2015/02/01 面试题
村优秀党员事迹材料
2014/01/15 职场文书
新农村建设标语
2014/06/24 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
婚宴领导致辞
2015/07/28 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python