在引发AJAX事件之前，请处理DOM-CSRF错误

Question

我正在与Django合作，尝试进行链接的AJAX调用-即，该调用在返回时会启动更多的AJAX调用。 我已经遍历了Django文档提供的处理CSRF令牌和AJAX的各种方法，但无济于事。

我的工作代码允许此链接的AJAX调用成功通过：

frm.submit(function(e){
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        headers: {'X-CSRFToken':csrftoken},
        success: function(data, status){
            $('#queue_div').append("<div class='container'>"+data['group_name']+"- "+data['client']+"<div id='queue"+counter+"'></div></div>");

            var div_id = 'queue'+counter;
            data['div_id'] = div_id;

            var token = $.cookie('csrftoken');
            data['csrf'] = token;

            $('#'+div_id).html(data['status']);

            callbackAJAX(data);
            } //end success function
    }); //end ajax function
    e.preventDefault();

但是，当您通过使用“ beforeSend”（如下所示）延迟立即触发AJAX事件的form事件时：

        var data = {'group_name':'name', 'client':'MrClient'}
        var counter = 0
        frm.submit(function(e){
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            headers: {'X-CSRFToken':csrftoken}
            beforeSend:function(e){
               $('#foo').append('<div class='container'>"+data['group_name']+"- "+data['client']+"<div id='queue"+counter+"'></div></div>');
             } .....

或通过在$ .ajax调用之前添加事件（如下所示）：

        frm.submit(function(e){
           $('#foo').append('<div class='container'>"+data['group_name']+"- "+data['client']+"<div id='queue"+counter+"'></div></div>');          
           $.ajax({
            type: frm.attr('method')....

您收到CSRF错误。

我成功完成了非常非常简单的功能，例如：

        var counter = 0;
        frm.submit(function(e){         
           $.ajax({
            type: frm.attr('method'),
            sendBefore: function(e){
              counter++;
        }

就是这样。 任何更复杂的东西都会被拒绝。 我对于如何使实际发生的事情或Django可以接受的事情变得一头雾水，感到非常困惑。 及其CSRF保护。

Answer 1

您尝试附加的HTML无效。 我相信这就是为什么表单提交不起作用的原因。 首先，您尝试将ID为foo的元素插入具有相同ID（ foo ）的元素中。 这是无效的HTML，因为永远不要在页面中重复ID。

第二个主要问题是您要附加<div id=foo></div> ，它应该是<div id="foo"></div>