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

47

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

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

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

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

  • 3
    самое простое: добавить цель = "_ blank" - менее просто: ajax
  • 2
    Так receiver.pl открывается в новом окне / вкладке?
Теги:

6 ответов

64
Лучший ответ

Самый простой ответ: 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;
   });
Поделиться
  • 0
    Это выглядит очень интересно! Как сказать ему , чтобы выполнить receiver.pl сценарий?
  • 0
    часть, где говорится, что $ form.attr ('action') 'делает это - она сообщает функции submit jQuery, чтобы вызвать действие, указанное в форме (' receive.pl '), не покидая страницу, то есть используя AJAX.
Показать ещё 23 комментария
59

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

  • изящно обрабатывать ошибки (например, повторить попытку)
  • предоставляют индикаторы пользовательского интерфейса (например, загрузка, обработка, успех, сбой)
  • запустить логику до отправки запроса или запустить логику после получения ответа.
Поделиться
  • 2
    Не сказал, что это был лучший ответ. Просто еще один вариант. ;)
  • 1
    Это на самом деле может быть лучшим ответом здесь ... Вам не нужно использовать Jquery, Ajax и т. Д.
Показать ещё 7 комментариев
33

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

Поделиться
  • 4
    Очень круто! Узнал что-то новое сегодня. Однако в практическом плане вы действительно хотели бы предоставить пользователю некоторую визуальную обратную связь о том, что отправка формы была обработана сервером. Похоже, что браузеры предоставляют это из коробки, поэтому использование AJAX для интерпретации HTTP 204, вероятно, будет лучшим выбором.
  • 0
    Вау ... Спасибо! ... Это действительно потрясающий совет, он не решает проблему на 100%, но это определенно временное решение. Спасибо!
Показать ещё 3 комментария
4

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

Поделиться
0

Использовать 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);
Поделиться
-8

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

Поделиться
  • 2
    Это не будет выполнять сценарий Perl.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню