python Django框架實(shí)現(xiàn)自定義表單提交
更新時(shí)間：2016年03月25日 15:01:42 作者：Spacebar
這篇文章主要為大家詳細(xì)介紹了Django框架實(shí)現(xiàn)自定義表單提交，針對(duì)"表單提交"和"Ajax提交"兩種方式來(lái)解決CSRF帶來(lái)的錯(cuò)誤進(jìn)行講解，感興趣的小伙伴們可以參考一下
除了使用Django內(nèi)置表單，有時(shí)往往我們需要自定義表單。對(duì)于自定義表單Post方式提交往往會(huì)帶來(lái)由CSRF(跨站請(qǐng)求偽造)產(chǎn)生的錯(cuò)誤"CSRF verification failed. Request aborted."
本篇文章主要針對(duì)"表單提交"和"Ajax提交"兩種方式來(lái)解決CSRF帶來(lái)的錯(cuò)誤
一、表單提交
Template：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計(jì)算數(shù)字和</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="開始計(jì)算">
</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>標(biāo)簽內(nèi)添加{% csrf_token %},這樣在表單提交的過(guò)程中，會(huì)產(chǎn)生"csrfmiddlewaretoken"標(biāo)識(shí)去防止CSRF
(2)在Get請(qǐng)求頁(yè)面時(shí)，需要添加context_instance=RequestContext(request) ,它和{% csrf_token %}配合使用，缺少一個(gè)都會(huì)出現(xiàn)上述錯(cuò)誤,RequestContext 需要在 django.shortcuts 導(dǎo)入
(3)只有當(dāng)表單以Post方式提交時(shí)，才需要驗(yàn)證CSRF，Get方式是不需要的
二、Ajax提交
同比與表單提交，Ajax提交需要進(jìn)行額外的操作，Ajax提交時(shí)需要自己提供"csrfmiddlewaretoken"標(biāo)識(shí)參數(shù)。我們除了需要引入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="開始計(jì)算">
<h1>計(jì)算的結(jié)果為：<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就可以自動(dòng)幫我們生成"csrfmiddlewaretoken"標(biāo)識(shí),接下來(lái)你就可以使用$.post()了
$.ajaxSetup({
data:{csrfmiddlewaretoken: '{{ csrf_token }}'}
});
(2)context_instance=RequestContext(request) 并不是必須的
(3)Get請(qǐng)求不需要以上操作，直接使用$.get()即可
注：本文使用的Django1.8.3版本進(jìn)行測(cè)試。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要介紹了pyth學(xué)習(xí)實(shí)操案例,主要分享的小練習(xí)有我的咖啡館你做主、顯示2019中超聯(lián)賽中前五名排行、模擬手機(jī)通訊錄，適合初學(xué)者，需要的小伙伴可以參考一下2022-02-02
通過(guò)實(shí)例了解Python str()和repr()的區(qū)別
這篇文章主要介紹了通過(guò)實(shí)例了解Python str()和repr()的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
進(jìn)程是一個(gè)具有一定獨(dú)立功能的程序關(guān)于某個(gè)數(shù)據(jù)集合的一次運(yùn)行活動(dòng)。它是操作系統(tǒng)動(dòng)態(tài)執(zhí)行的基本單元，在傳統(tǒng)的操作系統(tǒng)中，進(jìn)程既是基本的分配單元，也是基本的執(zhí)行單元。本文將介紹python實(shí)現(xiàn)網(wǎng)絡(luò)進(jìn)程2021-06-06
這篇文章主要為大家詳細(xì)介紹了python實(shí)現(xiàn)圖像邊緣檢測(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
python實(shí)現(xiàn)二維數(shù)組的對(duì)角線遍歷
這篇文章主要為大家詳細(xì)介紹了python實(shí)現(xiàn)二維數(shù)組的對(duì)角線遍歷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要為大家詳細(xì)介紹了基于python生成器封裝的協(xié)程類，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
本篇文章主要介紹了Python3 偽裝瀏覽器的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了Python列表(list)所有元素的同一操作解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
python學(xué)生管理系統(tǒng)代碼實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了python學(xué)生管理系統(tǒng)代碼實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
手把手教你配置JupyterLab 環(huán)境的實(shí)現(xiàn)
這篇文章主要介紹了手把手教你配置JupyterLab 環(huán)境,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02