python Django框架实现自定义表单提交
作者：Spacebar 发布时间：2021-01-04 14:52:42
标签：python,Django框架,自定义表单
除了使用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版本进行测试。
0
投稿猜你喜欢
- 本来是在找交通识别的程序，然后凑巧看见了证件照换底，于是学习了一下~一开始在网上找了一个很普遍写的程序，但是效果并不好，想要放弃了，然后看见
- 众所周知，python文件读取文件的时候所支持的newlines（即换行符），是指定的。这一点不管是从python的doucuments上还
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候- 这几天看了Amy老师的用javascript实现瀑布流，我跟着把代码敲出来。发现这样写只能第一次载入时适应屏幕，以后改变窗口大小就不能做到自
- 0.摘要本文主要介绍numpy库中，csv文件中数据的写入和读取方式。1.文件写入与读取写入：import numpy as npa = n
- python help使用C:\Users\wusong>pythonPython 3.8.2rc1 (tags/v3.8.2rc1:
- 问题描述：用 Python 实现函数 count_words()，该函数输入字符串 s 和数字 n，返回 s 中 n 个出现频率
- 最近在作图时需要将输出的图片紧密排布，还要去掉坐标轴，同时设置输出图片大小。要让程序自动将图表保存到文件中，代码为：plt.savefig(
- 如下所示：import pandas as pdfrom pandas import DataFrameseries = pd.read_c
- 数据加载分为加载torchvision.datasets中的数据集以及加载自己使用的数据集两种情况。torchvision.datasets
- Vigenere 加密算法该密码由意大利密码学家 Giovan Battista Bellaso 于 1553 年发明，但几个世纪以来一直归
- 前言本文仅仅介绍了常见的一些JS加密，并记录了JS和Python的实现方式常见的加密算法基本分为这几类：(1)base64编码伪加密(2)线
- 很多朋友说JavaScript的decodeURI函数也可以实现，但有bug所有呢，下面看下下面的函数，经过测试使用暂时没什么问题，我在之前
- CreateOrUpdate 是业务开发中很常见的场景，我们支持用户对某个业务实体进行创建/配置。希望实现的 repository 接口要达
- 级联样式表在13年前被引入，而且被广泛使用的CSS 2.1 标准在11年前被创建，显然我们现在已经与当年相差千里了。相当了不起的是期间网站开
- 我们通常会使用 apt-get或者是pip来安装包，但是这两者的安装路径是不一样的，区别如下：如果使用pip或者pip3安装，则第三方包在:
- 微软昨天在其2009年专业开发者大会上展示了下一个版本的Internet Explorer浏览器IE9。尽管只是一个早期版本，IE开发团队还
- 压测时，图片太少，想着下载网页中的图片，然后过滤指定分辨率，但网页中指定分辨率的图片太少了（见下） 后使用格式工厂转换图片import ur
- 目录一、前言二、Json.loads与eval 性能对比1. eval2. json.loads一、前言最近发现一些小伙伴使用eval来处理
- javascript中给数组加元素是一个非常简单的问题,javascript本身就提供了大量这类函数，我们可以使用js自带函数快速给数组增加
