Эквивалент формы запросов в AJAX

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

Использование формата

Хорошо, поэтому в этом решении мы используем форматирование для кнопок отправки, чтобы решить, куда пойдет форма, и мы используем прослушиватели событий для каждой кнопки отправки, чтобы отключить поля, которые вам не нужны. Это позволит вам отправить форму в разные места, и в зависимости от того, на какую кнопку вы щелкнете, она отправит разные данные.

$(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>