Django中的JavaScript函数不会发生对python函数的AJAX调用

Question

这是一个完整的流程，在这里必须小心。我在 Django/Python/Web 开发中编码。

我有一个 html 页面，它有一个虚拟按钮，可以触发我现在想要执行的所有功能。我想要一个 uploadFunction() 来执行相同的操作，而不是虚拟按钮。我搜索了一下，发现最好的方法是使用 AJAX，因为要执行的操作需要访问服务器。

这是我在 jsfunctions.js 文件中的 uploadFunction()

    function upload() {
   //does some upload      
    alert('before dummy')
    ajaxCallFunction();
}

我正在调用另一个单独的文件 ajax.js 中的 ajaxCallFunction()。 ajaxCallFunction() 如下：

 $(document).ready(function(){
   function ajaxCallFunction(){
    alert('right before ajax call')
     $.ajax({
        type: "POST",
        url: "/dummy/{{ frame.slug }}/",
        alert('AJAX CALL');
        data: {
        'snapshot' : $('#snapshot').val(),
        },
        success: dummy,
        dataType: 'html'
        alert('just finished')
        }
        headers:{
            'X-CSRFToken':csrftoken
        }
    });
}
});    

function dummySuccess(data, textStatus, jqXHR)
{
    $('#dummySuccess').html(data)
}

我希望我的upload() 调用ajaxCallFunction() 并将其重定向到views.py 中的一个方法（我已经映射到我的urls.py 中）。但是，我的代码根本没有命中 ajaxCallFunction。（我看不到我在 ajaxCallFunction 中放置的警报）。在我的通话页面中，我包含了所有这些内容。

<script language="javascript" type="text/css"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>        
<script language="javascript" src ="/static/js/jsfunctions.js"></script>
<script language="javascript" src ="/static/js/ajax.js"></script>

我的 ajax.js 中也有获取 CSRF Token 的函数（因为这是一个 post 方法）。我在这里错过了什么吗？我还需要做什么才能进行此 ajax 调用？请帮忙。在此先感谢:)

Answer 1

在 JavaScript 中，加载 .js 文件的顺序很重要。 你试过在jsfunctions.js之前加载ajax.js吗？

基本上当jsfunctions.js 加载到您的浏览器中时，ajax.js 中的函数是undefined（如果后者尚未加载）。

另外，请确保在 ajax 调用中的 data 中有一个名为 'csrfmiddlewaretoken' 的字段。从可维护性的角度来看，您可以将其保存在表单中，然后在将其发送到后端时对其进行序列化，而不是直接处理数据。像这样：

<form id="my-form" method="POST" action="/dummy/{{ frame.slug }}/">
    {% csrf_token %}
    <input name="whatever" value="your_data_goes_here" />
</form>

然后在你的 ajax 调用中：

var form = $('#my-form');
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize(),
    success: function() {
        alert("Huzzah!");
    },
    error: function() {
        alert("Oh no!");
    }
});

最后在您的views.py 中，您可以处理您的数据：

if "whatever" in request.POST:
    my_data = request.POST.get("whatever")