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版本进行测试。
以上就是本文的全部内容,希望对大家的学习有所帮助。