python Django框架实现自定义表单提交
作者:Spacebar 发布时间:2021-01-04 14:52:42
除了使用Django内置表单,有时往往我们需要自定义表单。对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误"CSRF verification failed. Request aborted."
本篇文章主要针对"表单提交"和"Ajax提交"两种方式来解决CSRF带来的错误
一、表单提交
Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算数字和</title>
</head>
<body>
<form method="post" action="{%url 'Calculate' %}">
{% csrf_token %}
<label for="A"><input id="A" name="ValueA" type="text"></label>
<label for="B"><input id="B" name="ValueB" type="text"></label>
<input type="submit" value="开始计算">
</form>
</body>
</html>
Views.py:
def Calculate(request):
if request.POST:
a=request.POST["ValueA"]
b=request.POST["ValueB"]
c=str(int(a)+int(b))
return render_to_response('Result.html',{'result':c})
else:
return render_to_response('Calculation.html',context_instance=RequestContext(request))
需要注意:
(1)在<form>标签内添加{% csrf_token %},这样在表单提交的过程中,会产生"csrfmiddlewaretoken"标识去防止CSRF
(2)在Get请求页面时,需要添加context_instance=RequestContext(request) ,它和{% csrf_token %}配合使用,缺少一个都会出现上述错误,RequestContext 需要在 django.shortcuts 导入
(3)只有当表单以Post方式提交时,才需要验证CSRF,Get方式是不需要的
二、Ajax提交
同比与表单提交,Ajax提交需要进行额外的操作,Ajax提交时需要自己提供"csrfmiddlewaretoken"标识参数。我们除了需要引入JQuery外还需要引入一段JS代码
jQuery(document).ajaxSend(function(event, xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function sameOrigin(url) {
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
var protocol = document.location.protocol;
var sr_origin = '//' + host;
var origin = protocol + sr_origin;
// Allow absolute or scheme relative URLs to same origin
return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
// or any other URL that isn't scheme relative or absolute i.e relative.
!(/^(\/\/|http:|https:).*/.test(url));
}
function safeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
});
Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 提交</title>
<script type="text/javascript" src="/static/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ajaxSend(function(event, xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function sameOrigin(url) {
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
var protocol = document.location.protocol;
var sr_origin = '//' + host;
var origin = protocol + sr_origin;
// Allow absolute or scheme relative URLs to same origin
return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
// or any other URL that isn't scheme relative or absolute i.e relative.
!(/^(\/\/|http:|https:).*/.test(url));
}
function safeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
});
</script>
<script type="text/javascript">
$(function(){
$.ajaxSetup({
data:{csrfmiddlewaretoken: '{{ csrf_token }}'}
});
$("#Comment").click(function(){
$.post('{% url 'AjaxRequest' %}',{"a":$("#A").val(),"b":$("#B").val()},function(data){
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<label for="A"><input id="A" name="ValueA" type="text"></label>
<label for="B"><input id="B" name="ValueB" type="text"></label>
<input type="button" id="Comment" value="开始计算">
<h1>计算的结果为:<span id="result"></span></h1>
</body>
</html>
View.py:
def AjaxRequest(request):
if request.POST:
a =request.POST["a"]
b=request.POST["b"]
c=int(a)+int(b)
return JsonResponse(c,safe=False)
else:
return render_to_response('AjaxDemo.html',context_instance=RequestContext(request))
需要注意:
(1)在使用引入的JS代码后,需要添加如下代码,这样JS就可以自动帮我们生成"csrfmiddlewaretoken"标识,接下来你就可以使用$.post()了
$.ajaxSetup({
data:{csrfmiddlewaretoken: '{{ csrf_token }}'}
});
(2)context_instance=RequestContext(request) 并不是必须的
(3)Get请求不需要以上操作,直接使用$.get()即可
注:本文使用的Django1.8.3版本进行测试。
猜你喜欢
- 多级联动下拉选择框,动态获取下一级,每一级数据为XML,可支持无限级(浏览器端需要Microsoft.XMLDOM支持)项目需要,一个材料类
- 几个月前,我开始学习个人形象管理,从发型、妆容、服饰到仪表仪态,都开始做全新改造,在塑造个人风格时,最基础的是先了解自己属于哪种风格,然后找
- 听说firefox是史上最好用的浏览器,便下载下来体验一番,将体验感受与大家分享一下,并和我一直使用的the world浏览器做一个对比!首
- 这是去年毕设做的一个Web漏洞扫描小工具,主要针对简单的SQL注入漏洞、SQL盲注和XSS漏洞,代码是看过github外国大神(听说是SMA
- 目录模板的用处模板语法继承和super函数利用jinja2 进行渲染模板的用处jinja2 可以用来修改配置文件,把配置文件的关键地方可以用
- 本文实例讲述了Python列表推导式与生成器表达式用法。分享给大家供大家参考,具体如下:和列表一样,列表推导式也采用方括号[]表示,并且用到
- 本文实例讲述了Python实现的KMeans聚类算法。分享给大家供大家参考,具体如下:菜鸟一枚,编程初学者,最近想使用Python3实现几个
- 对数字货币的崛起感到新奇的我们,并且想知道其背后的技术——区块链是怎样实现的。 但是完全搞懂区块链并非易事,我喜欢在实践中学习,通
- 如下所示:dic = dict()dic['a'] = 1dic['b'] = 2dic['c
- 这篇博客将介绍如何使用OpenCV制作Mask图像掩码。使用位运算和图像掩码允许我们只关注图像中感兴趣的部分,截取出任意区域的ROIs。应用
- 前言本文主要给大家介绍了关于python指定时间调用函数的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:在前面的一
- table.rows集合中是cell对象 cell.innerHTML = "<td>123</td>&q
- 方法一:读取文件时设置代码如下:Data = pd.read_excel(level_path, sheet_name=0, encodin
- Windows操作系统支持Python的Python2版本和Python3版本,下载安装时要根据windows的操作系统来选择对应的Pyth
- 如何制作一个倒计时的程序? 见下:<%CountdownDate = #1/1
- 一、环境pip install opencv-pythonpython3.9pycharm2020人狠话不多,直接上代码,注释在代码里面,不
- 首先要声明一点,大部分情况下,修改MySQL是需要有mysql里的root权限的, 所以一般用户无法更改密码,除非请求管理员。方法一使用ph
- 问题:我想每日从数据库里导出一些数据,内容基本上都是一样的,只是时间不同,比如导出一张表wjzcreate table wjz(id int
- 详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别os._exit() 和
- io.BytesIO简要介绍及示例io.BytesIO 是 Python 内置的一个 I/O 类,用于在内存中读写二进制数据。它的作用类似于