Django / Closure：如何通过 AJAX 验证 AJAX 表单？答案

【问题标题】：Django / Closure: How to validate AJAX form via AJAX?Django / Closure：如何通过 AJAX 验证 AJAX 表单？
【发布时间】：2013-06-30 12:39:34
【问题描述】：

我正在使用 Django 和 Google 的 Closure javascript 库，我想通过 AJAX 进行一些表单处理。

目前，我在页面上有一个按钮，上面写着“添加分数”。当您单击它时，它会触发 goog.net.Xhrio 请求以加载另一个带有表单的 URL，并通过调用 loadForm() 在一个小弹出框中显示内容。

loadForm = function(formId) {
  var form = goog.dom.getElement(formId);
  goog.style.setElementShown(goog.dom.getElement('popup-box'), true);
  goog.net.XhrIo.send(form.action, displayForm, form.method);
}

displayForm = function(e) {
  goog.dom.getElement('popup-box').innerHTML = e.target.getResponseText();
}

被加载的 Django 表单是一个非常基本的模型表单，具有一个简单的“分数”属性，可以根据数字范围进行验证。这是我必须处理表单提交的代码：

def Score(request):
  obj = ScoreModel.get(pk=request.POST['obj_id'])
  form = ScoreForm(request.POST, instance=obj)

  if form.is_valid():
    form.save()
    messages.success(request, 'Score saved!')
    return shortcuts.redirect('index')
  else:
    context_vars = {'score': score, 'form': quarter_form}
    shortcuts.render_to_response(
        'score_form.html', context_vars,
        context_instance=context.RequestContext(request))

如果输入分数的表单本身只是显示在页面上，这一切都可以正常工作，但是因为它是一个 AJAX 弹出窗口，所以它不能正常工作。如果我只是做一个简单的表单提交（通过 HTML 提交按钮），如果数据有效，它就可以正常工作。但是，如果数据无效，它不会在弹出窗口中显示有错误的表单，它只会在主浏览器窗口中而不是在弹出窗口。

相反，如果我通过上面的loadForm() JS 方法提交表单，如果表单无效（并在弹出框中显示无效表单），它可以正常工作，但如果表单有效则不起作用（因为主索引页面最终会显示在我的弹出窗口的 innerHTML 中）。

我似乎无法弄清楚如何让代码在这两种情况下都能正常工作。那么，我怎样才能吃到我的蛋糕呢？ :)

这是一个奇怪的问题，所以如果我解释得不够好，请告诉我，我会尽力澄清。提前致谢。

【问题讨论】：

为什么要弹出表单？
UI 就是这样设置的。所有的表单都会弹出内容，只是这个表单我们第一次真正需要验证。
ok - 当你向服务器发帖时，django 将运行验证，然后显示错误的表单（如果验证失败），我不确定你如何在弹出窗口中执行此操作您需要再次呈现表单模板。拥有 AjaxMixin 的另一种方法 - 查看docs.djangoproject.com/en/dev/topics/class-based-views/…。
谢谢@silviud。我之前已经阅读了这些文档，不幸的是，它们对我目前拥有的东西或多或少做了相同的事情（除了更优雅）——例如他们可以通过 AJAX 提交，也可以通过常规提交提交，但不能同时提交，具体取决于表单是否成功。幸运的是，我想我知道如何处理它，如果我能让它工作，我会跟进答案。

标签： ajax django forms closures

【解决方案1】：

我让它工作了。基本技巧是，如果表单提交成功，我不是返回重定向，而是返回一个带有重定向状态代码和重定向到的 URL 的基本响应对象。然后我修改了我的displayForm() 以查找它并在找到时重定向。

这是来自Score() 函数的修改代码：

if form.is_valid():
  form.save()
  messages.success(request, 'Score saved!')
  redirect = shortcuts.redirect('index')
  return http.HttpResponse(content=redirect['Location'],
                           status=redirect.status_code)

还有修改后的displayForm()：

var displayForm = function(e) {
  var responseText = e.target.getResponseText();

  if (e.target.getStatus() == 302) {
    // If this was a redirect form submission, the response text will be the URL
    // to redirect to.
    window.location.href = responseText;
  } else {
    // Regular form submission.  Show the response text.
    goog.dom.getElement('popup-box').innerHTML = responseText;
  }
};

【讨论】：