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

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

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

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

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

Ответ 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;
   });

Ответ 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 вы можете...

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

Ответ 3

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

Ответ 4

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

Ответ 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);

Ответ 6

Просто используйте: action="". Там не нужно ничего подобного javascript.