Django:Ajax调用不在chrome中工作。在Firefox中工作
更新:我发现问题(我认为)。我不认为这本身就是浏览器问题,而是速度问题。当我通过以下方式打印出csrftoken时:Django:Ajax调用不在chrome中工作。在Firefox中工作
var csrftoken = getCookie('csrftoken');
console.log(csrftoken)
在我的本地机器中我在控制台中获取令牌。在我的真人版上,toke是空的。我会为此提出一个新问题,因为实际问题已经发生了很大变化。编辑:在朋友的建议下,我已经把输入和按钮放到一个带有{$ csrf_token%}标签的表单中。我也将'csrfmiddlewaretoken'传回ajax文章。这不再适用于Firefox,但我认为方法正在改进,因为这种方法似乎适用于他:/。我已经更新了问题的代码片段是符合当前实现
' ‘原题低于 ’
我是初学者,当涉及到Django和web开发一般和我试图设置一个简单的应用程序。基本上,我想要做的是有一个输入框和一个按钮。点击该按钮后,输入框的内容将使用ajax回发到服务器,并被视图捕获。然后,我将在视图中查看输入框的内容并返回一个简单的json对象。代码:
HTML
<div class="input-text">
Enter the Map ID provided to you by ... below
</div>
<form onsubmit="return false;">
{% csrf_token %}
<input type="text" id="map-id-input">
<button id="map-id-btn" class='btn btn-default custom-btn' onclick="checkMapID()">
Go
</button>
</form>
的JavaScript
function checkMapID() {
var mapId = $("#map-id-input").val();
$.ajax({
url: "check_map_id/",
type: "POST",
dataType: "json",
data: {
csrfmiddlewaretoken: '{{ csrf_token }}',
map_id: mapId,
},
success: function(status_dict) {
if (status_dict.status === 1) {
$("#status").html("Valid map ID <br> Loading Data...")
window.location = status_dict.url;
}
else {
$("#status").html("Invalid map ID. Please try again, or contact MRCagney")
}
},
error: function(result) {
console.log(result)
}
});
}
Django的URL
url(r'^check_map_id/$', views.check_map_id),
Django的查看
@ensure_csrf_cookie
def check_map_id(request):
map_id = request.POST['map_id']
if map_id not in GEOJSON_LOOKUP.keys():
status = json.dumps({
'status': 0,
'url': '',
})
return HttpResponse(status, content_type="application/json")
else:
status = json.dumps({
'status': 1,
'url': reverse('map', args=(map_id,)),
})
return HttpResponse(status, content_type="application/json")
这真的是我所要做的一切。我应该说,我ahve添加所需的代码(如Django文档中定义)来设置AJAX标题:
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;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
这是在Firefox的工作很好,但在Chrome每当我点击我得到一个403错误按钮。错误是:
Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function,
setRequestHeader: function, overrideMimeType: function…}
abort: function (a){var b=a||u;return c&&c.abort(b),x(0,b),this}
always: function(){return e.done(arguments).fail(arguments),this}
complete: function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
done: function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
error: function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
fail: function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
getAllResponseHeaders: function(){return 2===t?e:null}
getResponseHeader: function (a){var b;if(2===t){if(!f){f={};while(b=ic.exec(e))f[b[1].toLowerCase()]=b[2]}b=f[a.toLowerCase()]}return null==b?null:b}
overrideMimeType: function (a){return t||(k.mimeType=a),this}
pipe: function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()}
progress: function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
promise: function (a){return null!=a?n.extend(a,d):d}
readyState: 4
responseText: "↵<!DOCTYPE html>↵<html lang="en">↵<head>↵ <meta http-equiv="content-type" content="text/html; charset=utf-8">↵ <meta name="robots" content="NONE,NOARCHIVE">↵ <title>403 Forbidden</title>↵ <style type="text/css">↵ html * { padding:0; margin:0; }↵ body * { padding:10px 20px; }↵ body * * { padding:0; }↵ body { font:small sans-serif; background:#eee; }↵ body>div { border-bottom:1px solid #ddd; }↵ h1 { font-weight:normal; margin-bottom:.4em; }↵ h1 span { font-size:60%; color:#666; font-weight:normal; }↵ #info { background:#f6f6f6; }↵ #info ul { margin: 0.5em 4em; }↵ #info p, #summary p { padding-top:10px; }↵ #summary { background: #ffc; }↵ #explanation { background:#eee; border-bottom: 0px none; }↵ </style>↵</head>↵<body>↵<div id="summary">↵ <h1>Forbidden <span>(403)</span></h1>↵ <p>CSRF verification failed. Request aborted.</p>↵↵↵ <p>You are seeing this message because this site requires a CSRF cookie when submitting forms. This cookie is required for security reasons, to ensure that your browser is not being hijacked by third parties.</p>↵ <p>If you have configured your browser to disable cookies, please re-enable them, at least for this site, or for 'same-origin' requests.</p>↵↵</div>↵↵<div id="explanation">↵ <p><small>More information is available with DEBUG=True.</small></p>↵</div>↵↵</body>↵</html>↵"
setRequestHeader: function (a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this}
state: function(){return c}
status: 403
statusCode: function (a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this}
statusText: "FORBIDDEN"
success: function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this}
then: function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()}
__proto__: Object
有没有简单的东西我在这里失踪?
非常感谢您花时间阅读所有这些!
我有同样的问题。设置标题适用于Firefox,但不适用于Chrome。 我做了什么:
var fd = {};
fd['csrfmiddlewaretoken'] = $.csrf_token;
哪里fd
是表单数据我通过AJAX发送。 $.csrf_token
是全局对象,我将其定义为模板打印标记。
之后(标题+表单数据)一切正常。 注意:在另外一种情况下,我正在模拟我发送的数据,就像表单一样。
var fd = new FormData();
fd.append('csrfmiddlewaretoken', $.csrf_token);
你也可以试试这个。 (在这种情况下,您应该将processData: false, contentType: false,
添加到AJAX请求设置中。)
还有一件事:我认为您应该使用jquery.cookie插件而不是定义自己的函数。
是fd ['csrfmiddlewaretoken'] = $ .csrf_token;相同: csrfmiddlewaretoken:csrftoken,其中var csrftoken = getCookie('csrftoken');? – user3908739 2014-09-25 21:39:37
在标题设置中,您应该从Cookie中获取标记。对于我得到的表单数据,使用模板将令牌写入js变量。 – coldmind 2014-09-25 21:43:18
虽然问题没有解决,但我认为我找到了原因。在我的本地机器上,打印出csrftoken变量会在控制台中产生一个令牌。但是,在我的实时版本中,无论浏览器如何,标记都不会被打印出来,而是被设置为空。该代码是一个脚本在我的模板的顶部:
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;
}
var csrftoken = getCookie('csrftoken');
console.log(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);
}
}
});
我会成立了为什么会发生一个新的问题
(因为我不知道!)
如果它适用于firefox而不是chrome,那么清理二者的缓存并再次检查:) – ruddra 2014-09-25 04:33:54
不幸的是,在这种情况下不起作用:/ – user3908739 2014-09-25 04:36:39