Как записать ответ form.submit


130

У меня такой код:

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

Я хочу записать html-ответ form1.submit? Как мне это сделать? Могу ли я зарегистрировать любую функцию обратного вызова для метода form1.submit?

Ответы:


110

Вы не сможете сделать это легко с помощью простого javascript. Когда вы публикуете форму, входные данные формы отправляются на сервер, и ваша страница обновляется - данные обрабатываются на стороне сервера. То есть submit()функция фактически ничего не возвращает, она просто отправляет данные формы на сервер.

Если вы действительно хотите получить ответ в Javascript (без обновления страницы), тогда вам нужно будет использовать AJAX, а когда вы начнете говорить об использовании AJAX, вам понадобится библиотека. jQuery , безусловно, самый популярный и мой личный фаворит. Есть отличный плагин для jQuery под названием Form, который будет делать именно то, что вам кажется.

Вот как можно использовать jQuery и этот плагин:

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

5
+1 для плагина jQuery Form. Это круто, но у вас неверный атрибут "target". Это не похоже на атрибут формы «действие»; т.е. это не пункт назначения. Из документации : target - определяет элемент (ы) на странице, который будет обновлен ответом сервера.
JCotton

39
честно говоря, вам НЕ НУЖНО использовать библиотеку для AJAX. библиотеки написаны с использованием javascript, поэтому существует небиблиотечное решение. Тем не менее, я на 100% сторонник использования библиотеки, чтобы абстрагироваться от всей нелепости и сложности, связанной с вызовом AJAX.
Джейсон

3
Я публикую этот комментарий скорее как к сведению, что вышеуказанное решение работает, за исключением случаев, когда речь идет о загрузке файлов через AJAX в IE 9 и ниже. У меня были проблемы с отправкой файлов через ajax в браузерах IE, отличных от HTML5 (IE 9 и ниже), поэтому я должен использовать хак iframe. Но для использования взлома iframe требуется form.submit (), но вы не можете дождаться ответа, который сообщит вам, удалось это или нет. Это поставило меня в затруднительное положение.
javaauthority

17
Здесь действительно не стоит пользоваться библиотекой. В чистом JS код не намного сложнее:var xhr = new XMLHttpRequest() xhr.open("POST", "myscript.php"); xhr.onload=function(event){ alert("The server says: " + event.target.response); }; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData);
12Me21

59

Альтернативой Ajax является установка невидимого <iframe>объекта в качестве цели вашей формы и чтение его содержимого <iframe>в его onloadобработчике. Но зачем беспокоиться, когда есть Ajax?

Примечание. Я просто хотел упомянуть эту альтернативу, поскольку в некоторых ответах утверждается, что этого невозможно добиться без Ajax.


4
Скажите, хотите ли вы разместить ссылку на URL для загрузки с помощью нажатия кнопки? Теперь вы не можете использовать Ajax для своего запроса. Хотите очистить или обновить интерфейс после завершения загрузки? Пришло время запросить обратный вызов от POST, который не является Ajax. (Necropost, я знаю.)
AlbertEngelB

2
@ Dropped.on.Caprica Ага, это все еще законный вариант использования <iframe>POST (с обратным вызовом parent). И для загрузки, и для загрузки ...
Ates Goral

1
Также, насколько мне известно, для всех, кому нужна совместимость со старыми версиями IE (7+), я почти уверен, что метод iframe - единственный выход. Пожалуйста, поправьте меня, если я ошибаюсь, потому что сейчас у меня эта проблема.
CoffeeIsProgramming

1
Для определения успешности загрузки я недавно научился ловкому трюку, который заключается в том, чтобы установить файл cookie в ответе на загрузку и запросить наличие этого файла cookie в браузере.
Атес Горал

3
Обратите внимание, что это будет работать, только если действие отправки формы находится на том же сайте, что и iframe. В противном случае политика Same-Origin заблокирует его.
TechnoSam 01

38

Ванильный способ Javascript, отличный от jQuery, извлеченный из комментария 12me21:

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

POSTТип содержимого For по умолчанию - «application / x-www-form-urlencoded», что соответствует тому, что мы отправляем в приведенном выше фрагменте. Если вы хотите отправить «другие вещи» или как-то изменить это, прочтите здесь некоторые мелкие детали.


8
Собственно это правильный ответ! Потому что все остальные ответы делают то же самое, но запутываются еще одним уровнем библиотек.
johnfound

Похоже, это именно то, что мне нужно, поскольку у меня уже есть файл PHP, который обрабатывает множество прямых XMLHttpRequest () на моей странице. Но в случае простой формы с типичными тегами <form action = "/mysite/mycode.php"> и <submit> я не уверен, как изменить ... Могу ли я заменить свои вызовы javascript httprequest (с помощью обратный вызов,) как в: <form action = "myhttpreq (" url, etc ...)? или, может быть, <form action = "#" onsubmit = "return myhttpfunction ()? Что-то в этом роде? Если это так просто, это определенно должен быть ИДЕАЛЬНЫЙ ответ. Но я немного запутался, как это настроить.
Рэнди,

1
@Randy В моем случае у меня была кнопка в такой форме, <input type='button' onclick="submitForm(); return false;">или вы могли добавить прослушиватель событий для события «отправить», например, ответ Маркуса: stackoverflow.com/a/51730069/32453
rogerdpack

31

Я делаю это так, и это работает.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});

4
Вы можете захотеть event.preventDefault();( event= первый аргумент функции отправки) вместо return false. Возврат false не просто остановит браузер от отправки формы, но также предотвратит возникновение других побочных эффектов, которые могут быть важны. Там являются многими из вопросов , связанных с этим.
Nate

1
ну да, верните false или preventDefault или stopPropogation в зависимости от потребностей.
rajesh_kw 02

1
Вам может потребоваться использовать, FormData($("myform")[0])если вы пытаетесь загрузить тип ввода = файл.
Аарон Хоффман

1
Чтобы быть более универсальным, вы можете использовать event.target.actionи $(event.target).serialize()вместо $('#form').attr('action')и $('#form').serialize().
Ли Райан

17

Будущие искатели Интернета:

Для новых браузеров (по состоянию на 2018 год: Chrome, Firefox, Safari, Opera, Edge и большинство мобильных браузеров, но не IE) fetch- это стандартный API, который упрощает асинхронные сетевые вызовы (для которых нам раньше требовались XMLHttpRequestjQuery $.ajax).

Вот традиционная форма:

<form id="myFormId" action="/api/process/form" method="post">
    <!-- form fields here -->
    <button type="submit">SubmitAction</button>
</form>

Если вам передана форма, подобная приведенной выше (или вы создали ее, потому что это семантический html), вы можете fetchзаключить код в прослушиватель событий, как показано ниже:

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((resp) => {
        return resp.json(); // or resp.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

(Или, если, как и исходный плакат, вы хотите вызвать его вручную без события отправки, просто поместите fetchтуда код и передайте ссылку на formэлемент вместо использования event.target.)

Docs:

Получить: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Другое: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript На этой странице в 2018 году не упоминается выборка (пока). Но здесь упоминается, что трюк target = "myIFrame" устарел. А также есть пример form.addEventListener для события submit.


11

Я не уверен, что вы понимаете, что делает submit () ...

Когда вы это делаете, form1.submit();информация формы отправляется на веб-сервер.

WebServer сделает все, что от него требуется, и вернет клиенту новую веб-страницу (обычно это та же страница, но с некоторыми изменениями).

Таким образом, вы никак не можете «поймать» возврат действия form.submit ().


Я создал еще одну страницу html и вернул ее в качестве ответа.
Khushboo

6

Обратного звонка нет. Это как переход по ссылке.

Если вы хотите записать ответ сервера, используйте AJAX или отправьте его в iframe и возьмите то, что появляется там после onload()события iframe .


2

Вы можете event.preventDefault()в обработчике кликов для своей кнопки отправки убедиться, что submitсобытие HTML-формы по умолчанию не срабатывает (что и приводит к обновлению страницы).

Другой альтернативой было бы использование более хакерской разметки формы: это использование <form>и здесь мешает type="submit"желаемому поведению; поскольку они в конечном итоге приводят к событиям щелчка, обновляющим страницу.

Если вы хотите по - прежнему использовать <form>, и вы не хотите писать пользовательские обработчики нажмите, вы можете использовать JQuery в ajaxметод, который абстрагирует всю проблему далеко для вас, подвергнув методы перспективны для success, errorи т.д.


Напомним, что вы можете решить свою проблему одним из следующих способов:

• предотвращение поведения по умолчанию в функции обработки с помощью event.preventDefault()

• использование элементов, не имеющих поведения по умолчанию (например, <form>)

• с использованием jQuery ajax


(я только что заметил, что этот вопрос из 2008 года, не знаю, почему он появился в моей ленте; во всяком случае, надеюсь, это четкий ответ)


2

Это мой код для этой проблемы:

<form id="formoid" action="./demoText.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $( this ), url = $form.attr( 'action' );

  /* Send the data using post with element id name and name2*/
  var posting = $.post( url, { name: $('#name').val()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

1

Если вы хотите записать вывод запроса AJAX с помощью Chrome, вы можете выполнить следующие простые шаги:

  1. Откройте набор инструментов программистов
  2. Подойдите к консоли и где угодно внутри нее
  3. В появившемся меню нажмите «Включить ведение журнала XMXHTTPRequest».
  4. После этого каждый раз, когда вы делаете запрос AJAX, в вашей консоли будет появляться сообщение, начинающееся с «XHR завершена загрузка: http: // ......».
  5. Нажав на появившуюся ссылку, вы откроете вкладку «Ресурсы», где вы сможете увидеть заголовки и содержание ответа!

1
    $.ajax({
        url: "/users/login/",    //give your url here
        type: 'POST',
        dataType: "json",
        data: logindata,
        success: function ( data ){
        //  alert(data);    do your stuff
        },
        error: function ( data ){
        //  alert(data);    do your stuff
        }
    });

1

Основываясь на ответе @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), я обрабатываю ошибки публикации формы и успехи:

    $('#formName').on('submit', function(event) {
        event.preventDefault(); // or return false, your choice
        $.ajax({
            url: $(this).attr('action'),
            type: 'post',
            data: $(this).serialize(),
            success: function(data, textStatus, jqXHR) {
                // if success, HTML response is expected, so replace current
                if(textStatus === 'success') {
                    // https://stackoverflow.com/a/1236378/4946681
                    var newDoc = document.open('text/html', 'replace');
                    newDoc.write(data);
                    newDoc.close();
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 0 || jqXHR == 302) {
                alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
            } else {
                alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
            }
        });
    });

Я использую thisтак, чтобы моя логика могла быть повторно использована, я ожидаю, что HTML будет возвращен в случае успеха, поэтому я визуализирую его и заменяю текущую страницу, и в моем случае я ожидаю перенаправления на страницу входа, если время сеанса истекло, поэтому Я перехватываю это перенаправление, чтобы сохранить состояние страницы.

Теперь пользователи могут войти в систему через другую вкладку и повторить попытку отправки.


0

Вам нужно использовать AJAX. Отправка формы обычно приводит к загрузке новой страницы браузером.


0

Вы можете сделать это с помощью javascript и технологии AJAX. Взгляните на jquery и на этот плагин формы . Вам нужно всего лишь включить два js файла, чтобы зарегистрировать обратный вызов для form.submit.


0

Вы можете сделать это с помощью jQuery и ajax()метода:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
      $.ajax({
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
        },
        type: "POST",
        url : "/hello.hello",
        dataType : "json",
        data : JSON.stringify({"hello_name": "hello"}),
        error: function () {
          alert('loading Ajax failure');
        },
    	onFailure: function () {
          alert('Ajax Failure');
    	},
    	statusCode: {
          404: function() {
          alert("missing info");
          }   
    	},
        success : function (response) {
          alert("The server says: " + JSON.stringify(response));
        }
      })
      .done(function( data ) {
        $("#result").text(data['hello']);
      });
};</script>


0
 $(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
            type : "POST",
            data : $(this).serialize(),
            success : function(data) {
                var treeMenuFrame = parent.frames['wikiMenu'];
                if (treeMenuFrame) {
                    treeMenuFrame.location.href = treeMenuFrame.location.href;
                }
                var contentFrame = parent.frames['wikiContent'];
                contentFrame.document.open();
                contentFrame.document.write(data);
                contentFrame.document.close();
            }
        });
    });
});

Blockquote

Прежде всего используйте $ (document) .ready (function ()) внутри этого use ('formid'). submit (function (event)), а затем предотвратите действие по умолчанию, которое вызывает отправку формы ajax $ .ajax ({,,, ,}); он примет параметр u, который вы можете выбрать в соответствии с вашими требованиями, затем вызовите функцию success: function (data) {// сделайте все, что вы хотите, мой пример помещает ответ html в div}


0

Прежде всего нам понадобится serializeObject ();

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

затем вы делаете простой пост и получаете ответ

$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true 
}
else
{
//do false
}

});

0

У меня есть следующий код, который эффективно запускается с использованием ajax с данными из нескольких частей

function getUserDetail()
{
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var gender =$("#userForm input[type='radio']:checked").val();
    //var gender2 = document.getElementById("gender2").value;
    //alert("fn"+firstName+lastName+username+email);
    var roleIndex = document.getElementById("role");
    var role = roleIndex.options[roleIndex.selectedIndex].value;
    var jobTitleIndex = document.getElementById("jobTitle");
    var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var addressLine1 = document.getElementById("addressLine1").value;
    var addressLine2 = document.getElementById("addressLine2").value;
    var streetRoad = document.getElementById("streetRoad").value;

    var countryIndex = document.getElementById("country");
    var country = countryIndex.options[countryIndex.selectedIndex].value;

    var stateIndex = document.getElementById("state");
    var state = stateIndex.options[stateIndex.selectedIndex].value;

    var cityIndex = document.getElementById("city");
    var city = cityIndex.options[cityIndex.selectedIndex].value;



    var pincode = document.getElementById("pincode").value;

    var branchIndex = document.getElementById("branch");
    var branch = branchIndex.options[branchIndex.selectedIndex].value;

    var language = document.getElementById("language").value;
    var profilePicture = document.getElementById("profilePicture").value;
    //alert(profilePicture);
    var addDocument = document.getElementById("addDocument").value;


    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var data = new FormData();
    data.append('firstName', firstName);
    data.append('lastName', lastName);
    data.append('username', username);
    data.append('email', email);
    data.append('phoneNumber', phoneNumber);
    data.append('role', role);
    data.append('jobTitle', jobTitle);
    data.append('gender', gender);
    data.append('shiftId', shiftId);
    data.append('lastName', lastName);
    data.append('addressLine1', addressLine1);
    data.append('addressLine2', addressLine2);
    data.append('streetRoad', streetRoad);
    data.append('country', country);
    data.append('state', state);
    data.append('city', city);
    data.append('pincode', pincode);
    data.append('branch', branch);
    data.append('language', language);
    data.append('profilePicture', $('#profilePicture')[0].files[0]);
     for (var i = 0; i < $('#document')[0].files.length; i++) {
            data.append('document[]', $('#document')[0].files[i]);
        }



    $.ajax({
        //url : '${pageContext.request.contextPath}/user/save-user',
        type: "POST",
        Accept: "application/json",
        async: true,
        contentType:false,
        processData: false,
        data: data,
        cache: false,

        success : function(data) {      
            reset();
            $(".alert alert-success alert-div").text("New User Created Successfully!");
         },
       error :function(data, textStatus, xhr){
           $(".alert alert-danger alert-div").text("new User Not Create!");
        }


    });


//

}

0

Вы можете использовать jQuery.post () и возвращать красиво структурированные ответы JSON с сервера. Это также позволяет вам проверять / дезинфицировать ваши данные непосредственно на сервере, что является хорошей практикой, потому что это более безопасно (и даже проще), чем делать это на клиенте.

Например, если вам нужно отправить html-форму на сервер (в saveprofilechanges.php) с данными пользователя для простой регистрации:

I. Клиентские части:

Часть Ia HTML:

<form id="user_profile_form">
  <label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
  <label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
  <label for="email"><input type="email" name="email" id="email" required />Email</label> 
  <input type="submit" value="Save changes" id="submit" />
</form>

Часть Ib Script:

$(function () {
    $("#user_profile_form").submit(function(event) {
      event.preventDefault();
      var postData = {
        first_name: $('#first_name').val(),
        family_name: $('#family_name').val(),
        email: $('#email').val()
      };
      $.post("/saveprofilechanges.php", postData,
        function(data) {
          var json = jQuery.parseJSON(data);
          if (json.ExceptionMessage != undefined) {
            alert(json.ExceptionMessage); // the exception from the server
            $('#' + json.Field).focus(); // focus the specific field to fill in
          }
          if (json.SuccessMessage != undefined) {
            alert(json.SuccessMessage); // the success message from server
          }
       });
    });
});

II. Серверная часть (saveprofilechanges.php):

$data = $_POST;
if (!empty($data) && is_array($data)) {
    // Some data validation:
    if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'first_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'family_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
       echo json_encode(array(
         'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
         'Field' => 'email' // Form field to focus in client form
       ));
       return FALSE;
    }
    // more actions..
    // more actions..
    try {
       // Some save to database or other action..:
       $this->User->update($data, array('username=?' => $username));
       echo json_encode(array(
         'SuccessMessage' => "Data saved!"
       ));
       return TRUE;
    } catch (Exception $e) {
       echo json_encode(array(
         'ExceptionMessage' => $e->getMessage()
       ));
       return FALSE;
    }
}

-5

вы можете сделать это без ajax.

напишите понравившееся ниже.

.. .. ..

а затем в "action.php"

затем после frmLogin.submit ();

читать переменную $ submit_return ..

$ submit_return содержит возвращаемое значение.

удачи.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.