Question

表单请求不仅发送到服务器，而且还将用户重定向到给定的资源，并使用给定的方法。我想在AJAX中具有相同的功能。

例如，我希望与此表单发送的请求等效：

<form method="POST" action="/resource">
  <button type="submit">Submit</button>
</form>

我不希望这样的AJAX回调方法中的重定向：

<button type="submit" onclick="submit()">Submit</button>

<script>
function submit() {
  $.ajax({
    url: "/resource",
    type: "POST",
    success: function() {
      window.location.replace("/resource")
    }
  })
}
</script>

window.location.replace(...)仅发送GET请求，但我也希望能够像表单一样发送POST请求。我该怎么办？

Answer 1

使用表单操作

好的，因此在此解决方案中，我们对提交按钮使用formaction来决定表单将移至何处，并且为每个提交按钮使用事件侦听器来禁用不需要的字段。这将使您将表单提交到不同的位置，并且根据您单击的按钮，它将发送不同的输入。

$(document).ready(function(){
//event listener for first submit
    $("#submit-1").on("click",function(event){
          //disable inputs you don't want to send
         $("#input-2").prop('disabled', true);
          
    });
 //event listener for second submit
    $("#submit-2").on("click",function(event){
          //disable inputs you don't want to send
         $("#input-1").prop('disabled', true);
          
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form id="form-1" action="#" method="post">

<input type="text" name="input-1" id="input-1" />
<br/>
<input type="text" name="input-2" id="input-2" />
<br/>
<input formaction="reource1" type="submit" name="submit-1" id="submit-1" value="Send Input 1"/>
<br>
<input formaction="reource2" type="submit" name="submit-2" id="submit-2" value="Send Input 2"/>

</form>

让我知道这是否回答了问题。

使用JS替代更改表单操作

在此解决方案中，我们使用JS更改表格动作，然后禁用我们不想发送的输入，然后强制提交表格。

$(document).ready(function() {
  //event listener for first submit
  $("#submit-1").on("click", function(event) {
    //disable inputs you don't want to send
    $("#input-2").prop('disabled', true);
    //change form action
    $("#form-1").attr("action", "resource1");

    //submit form
    $("#form-1").submit();
  });
  //event listener for second submit
  $("#submit-2").on("click", function(event) {
    //disable inputs you don't want to send
    $("#input-1").prop('disabled', true);
    //change form action
    $("#form-1").attr("action", "resource2");
    //submit form
    $("#form-1").submit();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form id="form-1" action="#" method="post">

  <input type="text" name="input-1" id="input-1" />
  <br/>
  <input type="text" name="input-2" id="input-2" />
  <br/>
  <button id="submit-1" type="button">Send Input 1</button>

  <br>
  <button id="submit-2" type="button">Send Input 2</button>


</form>

等效于AJAX中的表单请求

1 个答案: