Question

我正在使用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中）。

我似乎无法弄清楚如何让代码在两种情况下都能正常工作。那么，我怎么能把蛋糕拿来吃呢？：）

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

Answer 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;
  }
};

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

1 个答案: