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

2024-10-05 09:49:35

本文实例讲述了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程序设计有所帮助。

Django 使用Ajax进行前后台交互的示例讲解

本文要实现的功能是:根据下拉列表的选项将数据库中对应的内容显示在页面,选定要排除的选项后,提交剩余的选项到数据库. 为了方便前后台交互,利用了Ajax的GET和POST方法分别进行数据的获取和提交. 代码如下:  <script> $("#soft_id").change(function(){ var softtype=$("#soft_id").find("option:select
Django csrf 验证问题的实现

关于 csrf 的基本了解百度百科:CSRF(Cross-site request forgery)跨站请求伪造,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用.通过伪装来自受信任用户的请求来利用受信任的网站. 简单来说就是攻击者盗用你的身份,以你的名义来发送恶意请求.比如说用户通过账号密码访问了网站A,A网站将一些cookie信息保存在浏览器中实现用户状态行为跟踪.这时用户又打开了B网站,B网站返回了一些恶意代码,并请求访问A.这样浏览器就会携带cookie以用户的权限访问A网站并执
详解Django解决ajax跨域访问问题

这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料,文中介绍的实现方法包括:使用django-cors-headers全局控制.使用JsonP,只能用于Get方法以及在views.py里设置响应头,只能控制单个接口,需要的朋友可以参考下. 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: 但是,Chrome浏览器提示错误: No 'Access-Control-Allow-Origin' header is present on the
django 通过ajax完成邮箱用户注册、激活账号的方法

一.图片验证码 django-simple-captcha配置 1.在pycharm中,File====>Settings====>Project:项目名====>Project Interpreter====>+====>搜django-simple-captcha 选择0.55以上版本,然后点install package 按钮进行安装 2.项目名/urls.py中添加代码: from django.urls import path,include ...... from
Django中ajax发送post请求报403错误CSRF验证失败解决方案

前言今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显然,用ajax发送post请求这样就白搭了: 文末已经更新更简单的方法,上面的略显麻烦上网上查了一下,看了几个别人的博客,才知道官网也早有说明解决办法,大致流程就是: 就是新建一个JavaScript文件,然后把网上给的代码粘贴进去,然后在你使用ajax的页面把它引入一下:当然,如果你在网上
Django+Ajax+jQuery实现网页动态更新的实例

views.py中的修改增加相应的请求处理函数: def getdevjson(request): print 'get here' if ('key' in request.GET): searchkey = request.GET.get('key') return JsonResponse(search(searchkey)) else: return HttpResponse('Sorry!') 返回字符串中,既可以使用from django.http import JsonRespo
Django中使用jquery的ajax进行数据交互的实例代码

jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择最终实现效果如图: 将jquery文件拷贝到static/js/目录下打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo
解决django前后端分离csrf验证的问题

第一种方式ensure_csrf_cookie 这种方方式使用ensure_csrf_cookie 装饰器实现,且前端页面由浏览器发送视图请求,在视图中使用render渲染模板,响应给前端,此时这个渲染模板的视图函数上要加上这个装饰器这种方式保证了模板返回时,前端接收到的响应中有csrftoken这个cookie,方法见代码. 以上方法并没有严格意义的前后分离,如果模板中有form表单,可以直接在模板中添加{% csrf_token %}. 第二种方式前后完全分离,前端页面直接通过获取静态文
关于django 1.10 CSRF验证失败的解决方法

最近工作闲,没事自学django,感觉这个最烦的就是各版本提供的api函数经常有变化,不是取消了就是参数没有了,网上搜到的帖子也没说明用的是什么版本的django,所以经常出现搬运过来的代码解决不了问题的情况,不过基本上遇到的坑不多,最坑的就是在提交post表单时弄了两天的CSRF验证失败问题,特此记录一下,我用的是django 1.10.3: 如果你不想使用这个功能,直接找到settings.py中的'django.middleware.csrf.CsrfViewMiddleware',这一行
Django框架如何使用ajax的post方法

Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是CMS(内容管理系统)软件.并于2005年7月在BSD许可证下发布.这套框架是以比利时的吉普赛爵士吉他手Django Reinhardt来命名的. 今天在尝试调用jQuery的ajax时发现一个问题,就是使用GET方法服务器可以正常返回,但是使用POST方法却不行.后来再测试表单方式的POST的方法也
django+js+ajax实现刷新页面的方法

本文实例讲述了django+js+ajax实现刷新页面的方法.分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服务器.这样可以将服务器的维护工作暴漏在更加友好的界面操作,而非通过SecureCRT去敲指令.而且还能提供给策划运维人员来处理一些常规的事情. 这里将会讲解一个非常小的知识点: ① js如何发起一次请求 ② django如何响应请求 ③ js接收到响应如何区域刷新页面 js部分我们先在html中定
django通过ajax发起请求返回JSON格式数据的方法

本文实例讲述了django通过ajax发起请求返回JSON格式数据的方法.分享给大家供大家参考.具体实现方法如下: 这是后台处理的: def checkemail(request): user = None if request.POST.has_key('email'): useremail = request.POST['email'] result = {} user = User.objects.filter(useremail__iexact = useremail) if user:

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

相关推荐

随机推荐