python Django框架实现自定义表单提交
除了使用Django内置表单，有时往往我们需要自定义表单。对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误"CSRFverificationfailed.Requestaborted."
本篇文章主要针对"表单提交"和"Ajax提交"两种方式来解决CSRF带来的错误
一、表单提交
Template：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>计算数字和</title>
</head>
<body>
<formmethod="post"action="{%url'Calculate'%}">
{%csrf_token%}
<labelfor="A"><inputid="A"name="ValueA"type="text"></label>
<labelfor="B"><inputid="B"name="ValueB"type="text"></label>
<inputtype="submit"value="开始计算">
</form>
</body>
</html>
Views.py:
defCalculate(request):
ifrequest.POST:
a=request.POST["ValueA"]
b=request.POST["ValueB"]
c=str(int(a)+int(b))
returnrender_to_response('Result.html',{'result':c})
else:
returnrender_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){
functiongetCookie(name){
varcookieValue=null;
if(document.cookie&&document.cookie!=''){
varcookies=document.cookie.split(';');
for(vari=0;i<cookies.length;i++){
varcookie=jQuery.trim(cookies[i]);
//Doesthiscookiestringbeginwiththenamewewant?
if(cookie.substring(0,name.length+1)==(name+'=')){
cookieValue=decodeURIComponent(cookie.substring(name.length+1));
break;
}
}
}
returncookieValue;
}
functionsameOrigin(url){
//urlcouldberelativeorschemerelativeorabsolute
varhost=document.location.host;//host+port
varprotocol=document.location.protocol;
varsr_origin='//'+host;
varorigin=protocol+sr_origin;
//AllowabsoluteorschemerelativeURLstosameorigin
return(url==origin||url.slice(0,origin.length+1)==origin+'/')||
(url==sr_origin||url.slice(0,sr_origin.length+1)==sr_origin+'/')||
//oranyotherURLthatisn'tschemerelativeorabsolutei.erelative.
!(/^(\/\/|http:|https:).*/.test(url));
}
functionsafeMethod(method){
return(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if(!safeMethod(settings.type)&&sameOrigin(settings.url)){
xhr.setRequestHeader("X-CSRFToken",getCookie('csrftoken'));
}
});
Template：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Ajax提交</title>
<scripttype="text/javascript"src="/static/jquery.js"></script>
<scripttype="text/javascript">
jQuery(document).ajaxSend(function(event,xhr,settings){
functiongetCookie(name){
varcookieValue=null;
if(document.cookie&&document.cookie!=''){
varcookies=document.cookie.split(';');
for(vari=0;i<cookies.length;i++){
varcookie=jQuery.trim(cookies[i]);
//Doesthiscookiestringbeginwiththenamewewant?
if(cookie.substring(0,name.length+1)==(name+'=')){
cookieValue=decodeURIComponent(cookie.substring(name.length+1));
break;
}
}
}
returncookieValue;
}
functionsameOrigin(url){
//urlcouldberelativeorschemerelativeorabsolute
varhost=document.location.host;//host+port
varprotocol=document.location.protocol;
varsr_origin='//'+host;
varorigin=protocol+sr_origin;
//AllowabsoluteorschemerelativeURLstosameorigin
return(url==origin||url.slice(0,origin.length+1)==origin+'/')||
(url==sr_origin||url.slice(0,sr_origin.length+1)==sr_origin+'/')||
//oranyotherURLthatisn'tschemerelativeorabsolutei.erelative.
!(/^(\/\/|http:|https:).*/.test(url));
}
functionsafeMethod(method){
return(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if(!safeMethod(settings.type)&&sameOrigin(settings.url)){
xhr.setRequestHeader("X-CSRFToken",getCookie('csrftoken'));
}
});
</script>
<scripttype="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>
<labelfor="A"><inputid="A"name="ValueA"type="text"></label>
<labelfor="B"><inputid="B"name="ValueB"type="text"></label>
<inputtype="button"id="Comment"value="开始计算">
<h1>计算的结果为：<spanid="result"></span></h1>
</body>
</html>
View.py：
defAjaxRequest(request):
ifrequest.POST:
a=request.POST["a"]
b=request.POST["b"]
c=int(a)+int(b)
returnJsonResponse(c,safe=False)
else:
returnrender_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版本进行测试。
以上就是本文的全部内容，希望对大家的学习有所帮助。