Django AJAX 请求发送失败答案

【问题标题】：Django AJAX Request Fails To SendDjango AJAX 请求发送失败
【发布时间】：2013-12-26 22:50:40
【问题描述】：

我正在尝试发出 AJAX POST 请求以创建新对象。我有一个我想处理请求的 Tastypie API。

这是我的代码。

JS：

<script>
$(document).ready(function (event) {
    $('#newpersonalitem').submit(function (event) {
        event.preventDefault();
        var data = {name: $('#name').val()};
        $.ajax({
            url: 'http://162.216.18.30:8000/api/v1/personalitem/'
            type: 'POST',
            contentType: 'application/json',
            data: data,
            dataType: 'json',
            processData: false,
            success: function (data) {
                location.reload();
                console.log(data);
            },
        });
    });
});
</script>

HTML：

<form action="" id='newpersonalitem'>
{% csrf_token %}
New Item: <input type='text' id='name'>
<input type="submit" value="submit">
</form>

当我提交表单时，页面会重新加载，但从未发送过请求。我已经测试了 API，并且能够成功地从移动应用程序发出相同的请求。任何帮助将不胜感激，谢谢。

更新：我已经尝试在此处添加推荐的更改：

https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax

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)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

我在<form> 中添加了{% csrf_token %}。

仍然没有运气。

【问题讨论】：

为什么$(document).ready(function 上有一个preventDefault？没有创建任何侦听器。
那已经被删除了，忘记更新问题了。现在是正确的。我将提交侦听器放在$(document).ready() 中是否正确？
是的，你是。还有一个问题：$('#name').val().serialize() 无效。如果您只想发送name，请尝试data = {name: $('#name').val()} 并将其发送为data: data
我试过了，没有任何变化。我还尝试了我发现的其他东西，我在问题中更新了这些东西，但似乎没有用。

标签： ajax django jquery tastypie

【解决方案1】：

你可以用ajaxForm，我很喜欢。

也许这行得通：

<form action="http://162.216.18.30:8000/api/v1/personalitem/" id='newpersonalitem'>
    {% csrf_token %}
    New Item: <input type='text' id='name'>
    <input type="submit" value="submit">
</form>


<script>
    $(document).ready(function (event) {      
       var options = { 
           success: function (data) {
               console.log(data);
               location.reload();
           }
       };

        $('#newpersonalitem').submit(function (event) {
            $(this).ajaxSubmit(options); 
            return false; 
        });    
    });
</script>

【讨论】：

不幸的是，这并没有什么不同。
不要使用submit函数，而是使用on('submit', function(event){...})??
还是没有反应。