Отправить форму и остаться на той же странице?

Question

У меня есть форма, которая выглядит следующим образом

<form action="receiver.pl" method="post">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

и я хотел бы остаться на той же странице, когда нажата «Отправить», но все еще выполняется receiver.pl.

Как это должно быть сделано?

Answer 1

Самый простой ответ: jQuery.Сделайте что-то вроде этого:

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

Если вы хотите динамически добавлять контент и все еще работать с ним, а также с несколькими формами, вы можете сделать это:

   $('form').live('submit', function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });

Answer 2

99% времени я бы использовал XMLHttpRequest или fetch для чего-то подобного. Тем не менее, есть альтернативное решение, которое не требует JavaScript ...

Вы можете добавить скрытый iframe на свою страницу и установить целевой атрибут вашей формы, чтобы он указывал на этот iframe.

<style>
  .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>

<iframe name="hiddenFrame" class="hide"></iframe>

<form action="receiver.pl" method="post" target="hiddenFrame">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

Есть очень немного сценариев, где я бы выбрал этот маршрут. Как правило, лучше работать с javascript, потому что с javascript вы можете ...

• изящно обрабатывает ошибки (например, повторная попытка)
• предоставляет индикаторы пользовательского интерфейса (например, загрузка, обработка, успех, отказ)
• запустить логику до отправки запроса или запустить логику после получения ответа.

Answer 3

HTTP / CGI способ сделать это для вашей программы, чтобы вернуть код состояния HTTP 204 (без содержимого).

Answer 4

Когда вы нажимаете кнопку отправки, страница отправляется на сервер.Если вы хотите отправить его асинхронно, вы можете сделать это с помощью ajax.

Answer 5

Использование XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array()); 
// xhr.send(document);

Answer 6

Просто используйте: action="".Нет необходимости во что-то вроде javascript.