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

Question

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

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

假设 jquery 或 bootstrap 3 等通用库可用。DRY 解决方案的奖励点：我见过的大多数模式都有点毛团，而且我研究过的 django ajax 助手不能很好地解决或根本不能解决模式弹出问题。

Answer 1

这是一种使用普通 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）。

提交时，您需要进行一些修改，因为 jquery ajax 错误函数不会返回数据：如果返回代码是 204“无内容”，则清理并退出。如果返回代码为 200，则重新显示带有服务器端错误注释的表单。

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