我正在尝试捕获HTML表单的提交（由Django呈现）并使用ajax处理它，而不是重定向到新页面，但是javascript函数似乎永远不会被调用。这是我渲染的html：
<form action="" id="id_create_review" method="post">
<div id="div_id_session" class="form-group">
<label for="id_session" class="control-label ">
Session
</label>
<div class="controls ">
<select class="select form-control" id="id_session" name="session">
<option value="" selected="selected">---------</option>
<option value="1">Rocky Balboa Boxing Club</option>
<option value="2">All about the Box...ing</option>
</select>
</div>
</div>
<div id="div_id_rating" class="form-group">
<label for="id_rating" class="control-label requiredField">
Rating<span class="asteriskField">*</span>
</label>
<div class="controls ">
<select class="select form-control" id="id_rating" name="rating">
<option value="0.0">0.0</option>
<option value="0.5">0.5</option>
<option value="1.0">1.0</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
<option value="2.5" selected="selected">2.5</option>
<option value="3.0">3.0</option>
<option value="3.5">3.5</option>
<option value="4.0">4.0</option>
<option value="4.5">4.5</option>
<option value="5.0">5.0</option>
</select>
</div>
</div>
<div id="div_id_comments" class="form-group">
<label for="id_comments" class="control-label requiredField">
Comments<span class="asteriskField">*</span>
</label>
<div class="controls ">
<textarea class="textarea form-control" cols="40" id="id_comments" name="comments" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<div id="div_id_would_recommend" class="checkbox">
<label for="id_would_recommend" class="">
<input checked="checked" class="checkboxinput checkbox" id="id_would_recommend" name="would_recommend" type="checkbox">
Would recommend
</label>
</div>
</div>
<div class="form-group">
<div id="div_id_anonymous" class="checkbox">
<label for="id_anonymous" class="">
<input checked="checked" class="checkboxinput checkbox" id="id_anonymous" name="anonymous" type="checkbox">
Anonymous
</label>
</div>
</div>
<div class="form-actions">
<input type="submit" name="submit" value="Send Review" class="btn btn-primary" id="submit-id-submit">
</div>
</form>
这是我底部的javascript：
<script type="text/javascript">
$(document).ready(function() {
$('#id_create_review').submit(function() { // catch the form's submit event
console.log('Yeah, no?');
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#success_div').html(response); // update the DIV
},
error: function(e, x, r) { // on error..
$('#error_div').html(e); // update the DIV
}
});
return false;
});
});
</script>
修改
所以发生的事情是因为CSRF保护失败而导致403错误。我有一些javascript应该防止这403错误，如果请求是用ajax，我也没有看到＆＃34;是的，没有？＆＃34;登录到控制台，所以我认为必须通过标准Http提交表单。
也许我的问题是表单是由javascript处理的，但是ajax请求仍然导致403错误？但是为什么我不能在我的JS中看到控制台登录？
如果问题是我的ajax请求导致403错误，为什么我的保护代码无法发送csrf令牌？我不能说我100％理解所有这些......我主要是从使用django处理ajax请求的在线教程中抓住它。这是代码：
<script>
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');
/*
The functions below will create a header with csrftoken
*/
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function sameOrigin(url) {
// test that a given url is a same-origin 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));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
// Send the token to same-origin, relative URLs only.
// Send the token only if the method warrants CSRF protection
// Using the CSRFToken value acquired earlier
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
</script>
答案 0 :(得分：0)
尝试一下：
$(document).ready(function() {
$('#id_create_review').submit(function() { // catch the form's submit event
console.log('Yeah, no?');
console.log($(this).serialize());
var postdata = $(this).serializeArray();
var url = $(this).attr('action');
$.post(url , postdata, function(){
//
})
return false;
});
});
答案 1 :(得分：0)
尝试创建一个隐藏的输入字段，并将csrftoken放入其值......如下所示：
<input type="hidden" value="{% csrf_token %}">
如果您的错误是由csrf保护引起的，那就足够了。
答案 2 :(得分：0)
感谢所有提供解决方案的人。我最终通过在包含的表单所在的django模板中移动脚本来解决问题。
我有一个主django模板，其中包含一个使用{％include％}标签的较小django模板，该表单位于此包含的模板中。最初我有我的javascript来捕获主模板底部的表单提交。我认为这样会很好，因为模板都会被渲染成一个大的HTML文件，所以它不会真正改变哪个代码在哪个模板中，但显然它确实...我移动了我的脚本在我的小包含模板中，问题消失了。不知道为什么会这样。
答案 3 :(得分：0)
Django Docs on include template tags
include标记应该被视为“渲染此子模板并包含HTML”的实现，而不是“解析此子模板并将其内容包含在内，就好像它是父节点的一部分”。这意味着包含的模板之间没有共享状态 - 每个包含都是完全独立的渲染过程。
这就是你必须移动脚本的原因。我之前没有意识到这一点。