Django / Closure：如何通过AJAX验证AJAX表单？ [英] Django / Closure: How to validate AJAX form via AJAX?

问题描述

我使用的是Django和Google的Closure javascript库，我想通过AJAX做一些表单处理。

I'm using Django and Google's Closure javascript library, and I want to do some form processing via AJAX.

目前，我在页面上有一个按钮添加分数。当你单击它，它触发一个goog.net.Xhrio请求加载另一个URL与一个表单，并通过调用 loadForm（）

Currently, I have a button on the page that says "Add score." When you click it, it fires off a goog.net.Xhrio request to load another URL with a form on it and display the contents in a little pop up box, via a call to 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表单是一个非常基本的模型表单， score属性，可根据数字范围验证。这是我处理表单提交的代码：

The Django form that gets loaded is a very basic model form, with a simple "score" attribute that gets validated against a number range. Here's the code I have to process the form submission:

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提交按钮），它工作正常，如果数据有效。但是，如果数据无效，而不是在弹出窗口中显示错误的窗体，它只会加载弹​​出窗口中显示的文本 - 包含错误的窗体，在主浏览器窗口中，而不是在

This would all work fine if the form to enter the score itself was just displayed on the page, but because it is an AJAX popup, it doesn't work properly. If I just do a simple form submission (via HTML submit button), it works fine if the data is valid. But if the data isn't valid, instead of displaying the form with errors in the popup, it just loads only the text that would've been displayed in the popup - the form with errors - in the main browser window rather than in the popup.

相反，如果我通过我的 loadForm（） JS方法提交表单，如果表单无效（并在弹出框中显示无效表单），但如果表单是有效的（因为主索引页最终显示在我的弹出框的内部HTML）不工作。

Conversely, if I submit the form via my loadForm() JS method above, it works perfectly fine if the form is invalid (and displays the invalid form in the popup box), but doesn't work if the form is valid (because the main index page ends up getting displayed in my popup's innerHTML).

我似乎不知道如何让代码在这两种情况下工作。所以，我怎么能有我的蛋糕，吃它？ ：）

I can't seem to figure out how to get the code to work in both scenarios. So, how can I have my cake and eat it to? :)

这是一个奇怪的问题，所以如果我没有解释得很好，让我知道，我会尝试澄清。先感谢。

This is kind of a strange issue, so if I didn't explain it well enough, let me know and I'll try to clarify. Thanks in advance.

推荐答案

我得到它的工作。基本的诀窍是，如果表单提交成功，而不是返回一个重定向我返回了一个基本的响应对象与重定向状态代码和URL重定向到。然后我修改了我的 displayForm（）寻找和重定向，如果发现。

I got it to work. The basic trick was, if the form submission was successful, instead of returning a redirect I returned a basic response object with a redirect status code and the URL to redirect to. Then I modified my displayForm() to look for that and redirect if it was found.

这里是修改后的代码从 Score（）函数：

Here's the modified code from the Score() function:

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表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！