代码之家 › 专栏 › 技术社区 › Codejoy

ajax django表单只提交部分数据

django ajax jquery javascript

Codejoy · 技术社区 · 6 年前

编辑:将HTML表单语句更改为如下方式:

<form action="." class="form-horizontal" id="groupinfoForm" onsubmit="SubmitToServer()" method="post">

还将javascript更改为与onsubmit一起使用:

  function SubmitToServer() {

    event.preventDefault();

    //some ajaxy goodness here... still working on this.
     $.ajax({
        data: $("#groupinfoForm").serialize(),
        success: function(resp){
              alert ("resp: "+resp.name);
          }    
      })


    //I thinK i have to change all this to work inside the .ajax call?

    formData = $('form').serializeArray()
    $('#group_info option:first').prop('selected',true);

    gid = $('#group_info option:selected').val()
    //test alert
     alert("Submitting data for provider: " + $("#provider_id").val() + " and  " + gid + " and " + formData[0]['date_joined']);
    $("#groupinfo-dialog").modal('hide');
  }

现在我有了一个模式表单,它将弹出来填写一些额外的数据。为此,我决定尝试在ajax上下功夫。我有一些工作:

在作为UpdateView的类中:

def post(self, request, *args, **kwargs):  
    if self.request.POST.has_key('group_info_submit') and request.is_ajax():      
      print("YOU SURE DID SUBMIT")
      return HttpResponse("hi ya!")

问题是它总是重定向到另一个页面,并且由于模式弹出的表单不完整并且试图提交,因此验证失败。

我在这里看到这个帖子:

Ajax Form Submit to Partial View

这看起来太复杂了,我只是在我的表单中有一个小div,它是一个模态div,我想单独提交,与其他div不同。。。代码中的java脚本:

  $.ajax({
    data: $("#groupinfoForm").serialize(),
    success: function(resp){
          alert ("resp: "+resp.name);
      }    
  })

然后,小模式html片段是:

<div class="container">
  <div id="groupinfo-dialog" class="modal" title="Group Information" style="display:none">
    <div class="modal-dialog">

      <h1> Group Information </h1>
      <div class="modal-content">
        <div class="modal-body">
          <form action="." class="form-horizontal" id="groupinfoForm" method="post">
            {% csrf_token %}            
            {{ group_information_form.non_field_errors }}
            <div class="col-md-12">
              {{ group_information_form.date_joined_group.errors }}
              {{ group_information_form.date_joined_group.label_tag }}
              {{ group_information_form.date_joined_group }}
            </div>

            <div class="col-md-12">
              {{ group_information_form.provider_contact.errors }}
              {{ group_information_form.provider_contact.label_tag }}
              {{ group_information_form.provider_contact }}
            </div>
             <div class="col-md-12">
              {{ group_information_form.credentialing_contact.errors }}
              {{ group_information_form.credentialing_contact.label_tag }}
              {{ group_information_form.credentialing_contact }}
            </div>

              <div class="col-md-12">
                <div class="col-md-3">
                </div>
                <div class="col-md-8 form-actions">
                  <input type='button' class='btn' onclick="CancelDialog()" value='Cancel'/>
                  <input type='submit' class='btn btn-success' onclick="SubmitToServer()" value='Save' name='group_info_submit'/>
                </div>
                <div class="col-md-1">
                </div>
              </div>

            <input type="hidden" id="provider_id" name="provider_id" value="{{ provider_id }}" />
            <input type="hidden" id="group_id" name="group_id" value="{{ group_id }}" />
          </form>
        </div>
      </div>
    </div>
  </div>
</div> <!-- end modal Group Info Dialog -->

我在forms.py的后端有一个模型表单。还需要注意的是,有一个SubmitToServer()调用,我想我可以把所有ajax的东西都扔到服务器上,但是我想我需要$.ajax?我仍在学习jquery的深层次部分。我想在提交数据之前做很多预处理。我在submittoserver javascript上的尝试如下:

我不确定如何获取所有表单数据(仅从模式中获取我关心的三个字段)以将其发送过来…我的尝试如下:

  function SubmitToServer() {
    formData = $('form').serializeArray()
    $('#group_info option:first').prop('selected',true);

    gid = $('#group_info option:selected').val()
   alert("Submitting data for provider: " + $("#provider_id").val() + " and  " + gid + " and " + formData[0]['date_joined']);
    $("#groupinfo-dialog").modal('hide');
  }

那么我可以绕过主表单验证,以某种方式发送这三个字段吗?而不是让它重定向,而是留在页面上?

1 回复 | 直到 6 年前

Merak Marey 6 年前

您必须拦截提交事件。将onsubmit=“someFunction()”添加到表单中。在someajax函数中,您希望在提交之前验证数据,如果一切正常,则返回true,否则返回false。

https://jsfiddle.net/am5f14oc/

<html>
<body>
<form onsubmit="validateFunc()" action="." method="post">
<input id="name" type="text" name="name">
<input type="submit"/>
</form>
</body>
</html>

还有javascript

function validateFunc() {
    formData = $('form').serializeArray();
    // do ajax or whatever and return true if everything is ok
    return false;
  }