我确实需要在Django中进行相同的Ajax POST调用。因此,我使用Django文档中描述的方法:
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false,
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
但是,当我进行ajax调用并想为beforeSend方法添加一些操作(即显示加载程序图片)时,它将删除上述功能。示例:
$.ajax({
url: "some_url",
type: "POST",
data: some_form.serialize(),
beforeSend: function() { some_element.showLoader();}
});
$.ajax({
url: "some_other_url",
type: "POST",
data: some_other_form.serialize(),
beforeSend: function() { some_other_element.showLoader();}
});
DRY很重要,我不想将“ showLoader()”函数放在ajaxSetup中,因为它可能有所不同。
[好吧,没关系,我找到了解决方案。只需使用ajaxSend():
$(document).ajaxSend(function(event, xhr, settings){
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
});
$。ajax中传递的配置将覆盖$ .ajaxsetup中的配置,因此您可以先调用global beforesend func,然后再执行自定义作业
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
}
}
});
$.ajax({
type: "POST",
url: "url",
data: data,
beforeSend : function(xhr, settings){
//call global beforeSend func
$.ajaxSettings.beforeSend(xhr, settings);
//add some custom code below
$("#spinner").show();
blah blah blah
},
});
谢谢您对阿历克斯维尼亚的解决方案!我只想展示解决方案并进一步说明:
[添加此脚本以创建csrf令牌:
<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
并使用ajax设置功能将csrf令牌添加到您的ajax请求标头中:
<script>
var csrftoken = Cookies.get('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$(document).ajaxSend(function(event, xhr, settings){
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
});
</script>