如何构建 django ajax 模态弹出表单（带有服务器端表单）？

Posted 2023-02-24

【中文标题】如何构建 django ajax 模态弹出表单（带有服务器端表单）？

【英文标题】：How to build django ajax modal popup forms (with server side forms)?

【发布时间】：2014-07-02 03:51:29

【问题描述】：

有哪些好的现代模式或 django 应用程序可以处理出现在弹出窗口中的服务器端表单？我的意思是：

用户操作触发模式弹出窗口。 表单是服务器生成的，按需加载的。 如果提交错误，服务器会生成一个新表单。 在成功的情况下，有一个钩子可以更新 DOM 元素（主页不会重新加载）。

假设 jquery 或 bootstrap 3 等常用库可用。 DRY 解决方案的加分点：我见过的大多数模式有点毛球，我研究过的 django ajax 助手不能很好地解决模态弹出窗口问题，或者根本没有。

【问题讨论】：

相关但不相同的问题***.com/questions/11944887/…

【参考方案1】：

我就是这样做的：

$(document).on('submit', 'div.modal-body form', function(e) 

    var form_el = $(this);

    e.preventDefault();
    $.ajax(
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function (xhr, ajaxOptions, thrownError) 
            if ( $(xhr).find('.errorlist').length > 0 ) 

                form_el.parents('.modal-body').html(xhr);

             else 

                form_el.parents('.modal-body').html('<h4>Form was properly processed!</h4>');

            
        ,
        error: function (xhr, ajaxOptions, thrownError) 

            form_el.parents('.modal-body').html(xhr);
        
    );
);

所以基本上它的作用是：

监视整个文档以查找来自form 的提交事件 div.modal-body 内的元素（引导模式）。如果那个事件 火灾，然后它被捕获在这里。 我使用$(this)获取动作和方法，所以不需要硬编码 成功时，如果结果包含类errorlist，则表示发生了错误，因此我没有重定向，而是捕获它并更新表单以显示包含错误消息的表单。 否则，我会更新模式，说它能够正确提交。

【参考方案2】：

这是一种使用纯 jquery 和引导样式的弹出窗口的方法： 见http://jsfiddle.net/brycenesbitt/afyY2/。真实应用中的触发器如下所示：

$('#edit_foo').on('click', function () 
    $.ajax(
        type: 'GET',
        url: '/ajax/fooForm/',
        ,
        success: function (data, textStatus, jqXHR) 
            $('#foo_modal').find('.modal-body').html(data);
            $('#foo_modal').modal('show');
        ,
    );
);

ajax 调用应返回必要的 html 格式（无 json）。

在提交时，您需要 hack，因为 jquery ajax 错误函数不会返回数据： 如果返回码为 204“无内容”，则清理并退出。 如果返回码为 200，则重新显示带有服务器端错误说明的表单。

另请参阅这个不错但代码繁重的实时表单验证：http://www.the-art-of-web.com/javascript/ajax-validate/ 和这个 django ajax 工具网格https://www.djangopackages.com/grids/g/ajax/，我不特别推荐这些。

【参考方案3】：

https://www.djangopackages.com/grids/g/ajax/ 有一个 Django ajax 工具网格，您可以查看。