在触发 AJAX 事件之前，操作 DOM -- CSRF 错误答案

【问题标题】：Before firing AJAX event, manipulate DOM -- CSRF Error在触发 AJAX 事件之前，操作 DOM -- CSRF 错误
【发布时间】：2014-09-25 03:50:38
【问题描述】：

我正在使用 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();

但是当您延迟表单事件立即触发 AJAX 事件时，可以使用“beforeSend”（如下所示）：

        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 保护。

【问题讨论】：

标签： javascript jquery ajax django csrf

【解决方案1】：

您尝试附加的 HTML 无效。我相信这就是表单提交不起作用的原因。首先，您尝试将 ID 为 foo 的元素插入到具有相同 ID ( foo ) 的元素中。这是无效的 HTML，因为 ID 不应在页面内重复。

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

【讨论】：

这实际上是 HTML 示例——实际的 HTML 更复杂（如在第一个代码块中）。立即编辑