django框架中ajax的使用及避开CSRF 验证的方式详解
作者:dawn-liu 发布时间:2023-05-11 02:10:41
标签: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程序设计有所帮助。
来源:https://www.cnblogs.com/mmyy-blog/p/10512361.html
0
投稿
猜你喜欢
- Linux sort命令用于将文本文件内容加以排序。sort可针对文本文件的内容,以行为单位来排序。在 Linux、BSD 或 Mac 的终
- 在实际写程序中,经常要对变量类型进行判断,除了用type(变量)这种方法外,还可以用isinstance方法判断:a = 1b = [1,2
- 前言随着Python3的普及,Selenium3也跟上了行程。而Selenium3最大的变化是去掉了Selenium RC,另外就是Webd
- 我就废话不多说了,大家还是直接看代码吧~import tensorflow as tffrom sklearn.metrics import
- 说明:糗事百科段子的爬取,采用了队列和多线程的方式,其中关键点是Queue.task_done()、Queue.join(),保证了线程的有
- Microsoft JET Database Engine 错误 '80040e2
- 两个JS之间的函数互相调用这个问题是我在工作中用到的一个方法 因为要做封装所以想到能不能在一个js中引用另一个js中的function这样的
- 本文实例讲述了python读写配置文件操作。分享给大家供大家参考,具体如下:在用编译型语言写程序的时候,很多时候用到配置文件,作为一个约定的
- 一、定时器概述window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInter
- 滚动回归所谓滚动回归,通常用在时间序列上。记当前时刻为 t,回归时长为 s,则一直使用 当作自变量来预测 。使用滚动回归的目的通常是为了避免
- 挺久没写博客了,因为博主开始了今年另一段美好的实习经历,学习加做项目,时间已排满;很感谢今年这两段经历,让我接触了golang和python
- next()方法当一个文件被用作迭代器,典型例子是在一个循环中被使用,next()方法被反复调用。此方法返回下一个输入行,或引发
- USE [DAF_DB] GO /****** Object: StoredProcedure [dbo].[PROG_WORKTASK_L
- 这篇文章主要介绍了基于Python实现扑克牌面试题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 什么是钩子之前有转一篇关于回调函数的文章钩子函数、注册函数、回调函数,他们的概念其实是一样的。 钩子函数,顾名思义,就是把我们自己实现的ho
- 本文为大家分享了两段PHP分页类,很实用,供大家参考,具体内容如下<?php class Page { private $
- 钟馗之眼是一个强大的搜索引擎,不同于百度谷歌,它主要收集网络中的主机,服务等信息,国内互联网安全厂商知道创宇开放了他们的海量数据库,对之前沉
- 需求 现在有一个需求是将10w条数据插入到MSSQL数据库中,表结构如下,你会怎么做,你感觉插入10W条数据插入到MSSQL如下的
- 1. 参数解析1.1 inplace参数取值:True、FalseTrue:直接修改原对象False:创建一个副本,修改副本,原对象不变(缺
- SQL Server四类数据仓库建模的方法主要分为以下四类。第一类是关系数据库的三范式建模,通常我们将三范式建模方法用于建立各种操作型数据库