ajax django 表单仅提交部分数据

Question

编辑：将 HTML 表单语句更改为这样工作：

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

问题：我还需要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');
  }

我有一个表格，那就是标准的 django。填写成功后将其发送到另一个页面。如果您不填写部分，则会显示错误。

现在我有一个模态表单，它会弹出来填写一些额外的数据。为此，我决定尝试使用 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，我想与其他部分分开提交......我在代码中的 java 脚本：

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

那么小模态html sn-p就是：

<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');
  }

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

Answer 1

你必须拦截提交事件。将 onsubmit="someFunction()" 添加到表单中。在 someFunction ajax 中，您要在提交之前验证数据，如果一切正常，则返回 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;
  }