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程序员鲜为人知但你应该知道的17个问题
Jun 04 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
Jul 16 Python
python简单实现基数排序算法
May 16 Python
Python反射用法实例简析
Dec 22 Python
Python实现KNN邻近算法
Jan 28 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
Jul 20 Python
Python 类的特殊成员解析
Jun 20 Python
一行代码让 Python 的运行速度提高100倍
Oct 08 Python
Python 循环终止语句的三种方法小结
Jun 24 Python
Pytorch对Himmelblau函数的优化详解
Feb 29 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
May 07 Python
使用Python解析Chrome浏览器书签的示例
Nov 13 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
phpmyadmin的#1251问题
2006/11/25 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
异步加载script的代码
2011/01/12 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Pycharm更换python解释器的方法
2018/10/29 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
python清空命令行方式
2020/01/13 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Python Selenium库的基本使用教程
2021/01/04 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
网络工程师的自我评价
2013/10/02 职场文书
药学专业个人自我评价
2013/11/11 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
30岁生日感言
2014/01/25 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
李强优秀员工观后感
2015/06/16 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python