Django 通用视图 + JQueryUI 对话框 + Ajax答案

【问题标题】：Django Generic Views + JQueryUI Dialog + AjaxDjango 通用视图 + JQueryUI 对话框 + Ajax
【发布时间】：2012-02-25 19:02:40
【问题描述】：

谁能提供一个快速的演练？

我有一个 JQueryUI 对话框，它是通过 ajax 加载的 Django 表单。

jquery

$("#project_add").on(
    "click", {url: "/projects/project_create"}, open_dialog
);

function open_dialog(event) {
    //create the div that will hold the dialog box
    var projectDialog = $('#project_dialog');
    if ($('#project_dialog').length == 0) {
        projectDialog = $('<div id="project_dialog"></div>').appendTo('body');
    }

    // load the passed url into the dialog
    projectDialog.load(event.data.url);

    // create the dialog box and display it
    projectDialog.dialog({
        title: "Create Project",
        position: ['center', 'top'],
        closeOnEscape: true,
        close: function() {projectDialog.dialog("destroy");}
    });
}

django 视图

class CreateProject(CreateView):
template_name = "projects/project_create.html"
form_class = ProjectCreateForm

def form_valid(self, form):
    self.object = form.save()
    return HttpResponse()

django 模板

<form action="project_create/" method="post">
{{ form.as_p }}
<input type="submit" value="Save" id="dialog-save">
</form>

我要做的就是将所有活动保留在对话框中，即无效的表单条目将在对话框中弹出验证消息。如果表单有效，我希望对话框关闭并返回调用该对话框的页面。我搞砸了覆盖 form_valid 试图避免必须遵循重定向，但无济于事。我最终进入一个空白页面，其 url 等于在表单操作属性中传递的 url。我想避免在提交按钮上的 jquery 中添加一个侦听器来处理 js 中的表单验证。我看过一些帖子建议在 js 端进行验证，然后将数据传递到 django 进行保存。我想用 django 进行验证和保存。

如果我能弄清楚怎么做，当然我可以添加一个监听器来破坏成功提交表单的对话框，但我想使用 django 进行验证，只使用 jquery 进行演示。有什么建议吗？

【问题讨论】：

标签： jquery ajax django

【解决方案1】：

您必须通过 AJAX 提交表单，然后将对话内容替换为 HTTP 响应。例如：

$(document).on('click', '#dialog-save', function(event) {
    event.preventDefault();
    var $form = $(this).closest('form');
    $.ajax({
        url: $form.prop('action'),
        type: 'POST',
        data: $form.serialize()
    }).done(function (data) {
        $form.replaceWith(data);
    });
};

【讨论】：