Django表单提交 - 避免页面重定向

时间:2012-05-16 12:39:34

标签: django django-forms

我正在使用django表单来更新一些细节。单击保存更改后,将执行ajax调用,执行视图,发送ajax响应,在页面重新加载后执行成功代码。在重新加载时,由于表格不再有效,因此执行from.is_valid()的else部分。

if form.is_valid:
    #do something
    return HttpResponse(simplejson.dumps(response), mimetype='application/json')
else:
    #do something
    return render_to_response('ts.html', {'form': form}, context_instance = RequestContext(request))

我想避免页面重新加载成功的表单提交和jus返回ajax响应。怎么能实现呢?

我已经更改了我的代码,这里是视图,模板和jquery。

if request.POST:
    if form.valid():
         if credentials.correct():
               resp = {'success': True}
               return HttpResponse(simplejson.dumps(resp), mimetype='application/json')
         else:
              resp = {'success': False}
              return HttpResponse(simplejson.dumps(resp), mimetype='application/json')
    else:
         print "error in form"
         return render(request, 'manage_accounts.html', {'creds': creds, 'form': form})
else:
     form = SomeForm()
     return render(request, 'manage_accounts.html', {'creds': creds, 'form': form})

模板

<form action="/accounts/" method="POST" id="bitlychangeform">
  <div id="ajaxwrapper">
{% csrf_token %}
{{ form.non_field_errors }}
<!--{% include "Change_bitly_form.html" %}-->
{{ form.as_p }}
      <div class="clearfix">
        <label></label>
            <div class="input" style="float:right">
            <input type="submit" id="save" value="Save Changes" class="btn btn-primary  "/>
        </div>
     </div>
  </div>
</form>

Jquery的:

$(function(){
var form = $('#bitlychangeform');
    form.submit(function(e) {
    jQuery("#save").attr('disabled', true)
    jQuery("#ajaxwrapper").load(
          form.attr('action') + ' #ajaxwrapper',
          form.serializeArray(),
          function(data) {
              jQuery("#save").attr('disabled', false)
      alert(data);
          });
  return false;
      e.preventDefault(); 
  });
});

当我使用Django表单作为{{form.as_p}}时,页面重新加载不会发生,但是当我使用“自定义模板表单,字段作为密码char字段**并且仅在单击编辑按钮后可编辑” “,form.valid()返回false。

我要求django表单作为我想要的表单的自定义模板。任何人都可以指导我。

2 个答案:

答案 0 :(得分:1)

我猜您没有覆盖前端的默认表单提交行为,而且您正在正常提交表单。

确保您压制表单提交的默认行为。 This page templates / contact / form.html

下提供了一个很好的示例

答案 1 :(得分:1)

您可以在提交表单时返回false,在JavaScript中处理此问题。

form.submit(){
    #do something
    #make AJAX call
    #do something
    return false;
}