Как мне получить ответ от form.submit

У меня есть следующий код:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

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

Ответы на вопрос(20)

что браузер загружает новую страницу.

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

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

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

 Khushboo12 авг. 2016 г., 10:34
Я создал еще одну HTML-страницу и вернул ее в качестве ответа.

напишите свой, как ниже.

.. .. ..

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

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

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

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

удачи.

который идеально выполняется с использованием 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!");
        }


    });


//

}

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>

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

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

 TechnoSam01 нояб. 2017 г., 06:05
Обратите внимание, что это будет работать только в том случае, если действие отправки формы находится на том же сайте, что и iframe. В противном случае политика Same-Origin заблокирует его.
 Ates Goral24 февр. 2014 г., 19:58
@ Адам Ты прав.
 Ates Goral08 окт. 2015 г., 14:47
Для определения успешности загрузки недавно я узнал об одном хитром приеме: установить cookie в ответе на загрузку и опросить наличие этого cookie в браузере.
 Andy31 окт. 2017 г., 23:52
три слова: асинхронная загрузка файлов
 CoffeeIsProgramming23 февр. 2014 г., 20:59
Также, насколько мне известно, для любого, кому нужна совместимость со старыми версиями IE (7+), я почти уверен, что метод iframe - единственный путь. Пожалуйста, поправьте меня, если я ошибаюсь, потому что у меня сейчас есть эта проблема.
 AlbertEngelB06 мар. 2013 г., 17:56
Скажите, если вы хотите опубликовать URL-адрес для загрузки с помощью нажатия кнопки? Теперь вы не можете использовать Ajax для вашего запроса. Хотите очистить или обновить интерфейс после завершения загрузки? Сейчас настало время, чтобы хотеть обратного вызова из POST, которыйне Ajax. (Некропост, я знаю.)
 Ates Goral06 мар. 2013 г., 20:29
@ Dropped.on.Caprica Ага, это все еще законный вариант использования для<iframe> POSTs (с обратным вызовомparent). Для загрузки и выгрузки ...

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

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

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

И.А. 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>

I.b. Часть сценария:

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

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Тип контента по умолчанию - «application / x-www-form-urlencoded», который соответствует тому, что мы отправляем в приведенном выше фрагменте. Если вы хотите отправить «другие вещи» или настроить его как-нибудь, посмотритеВот для некоторых мельчайших деталей.

 Blue Eyed Behemoth17 февр. 2019 г., 22:44
Это должен быть правильный ответ.
 Randy20 июн. 2019 г., 19:09
Это выглядит как раз то, что мне нужно, так как у меня уже есть PHP-файл, который обрабатывает много прямых XMLHttpRequest () на моей странице. Но в случае простой формы с типичными тегами <form action = "/mysite/mycode.php"> и <submit> я не уверен, как изменить. Я бы заменил свои вызовы javascript httprequest (на обратный вызов,) как в: <form action = "myhttpreq (" url и т.д ...)? или, может быть, <form action = "#" onsubmit = "return myhttpfunction ()? Что-то в этом роде? Если это так просто, это определенно должен быть ответ. Но я немного запутался, как его настроить.
 johnfound31 июл. 2018 г., 10:22
На самом деле это правильный ответ! Потому что все остальные ответы точно такие же, но запутаны еще одним слоем библиотек.

вы можете выполнить следующие простые шаги:

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

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

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

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

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

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

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

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

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

• используя jQueryajax

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

Для новых браузеров (по состоянию на 2018 год: Chrome, Firefox, Safari, Opera, Edge и большинство мобильных браузеров, но не IE),fetch это стандартный API, который упрощает асинхронные сетевые вызовы (для чего мы привыклиXMLHttpRequest или JQuery's$.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.

Решение Вопроса

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

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

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

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;
 Jason11 сент. 2013 г., 23:36
честно говоря, вам НЕ НУЖНО использовать библиотеку для AJAX. библиотеки написаны с использованием javascript, поэтому существует небиблиотечное решение. Тем не менее, я на 100% за использование библиотеки, чтобы абстрагироваться от всей нелепости и сложности, связанных с вызовом AJAX.
 12Me2125 апр. 2017 г., 21:30
Использование библиотеки действительно не стоит здесь. В чистом 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);
 nickf11 авг. 2011 г., 11:02
@JCotton, спасибо - отредактировано!
 JCotton11 авг. 2011 г., 01:41
+1 для плагина jQuery Form. Это здорово, но вы неправильно указали атрибут 'target'. Это не похоже на атрибут действия в форме; то есть это не пункт назначения отправки. Отдокументы: target - Идентифицирует элемент (элементы) на странице, которая будет обновлена ​​ответом сервера.
 javaauthority24 февр. 2015 г., 20:25
Я публикую этот комментарий в качестве справки о том, что вышеуказанное решение работает, за исключением случаев, когда дело доходит до загрузки файлов через AJAX в IE 9 и ниже. У меня были проблемы с отправкой файлов через ajax в браузерах IE, отличных от HTML5 (IE 9 и ниже), поэтому я должен использовать взлом iframe. Но для использования хака iframe требуется форма form.submit (), но вы не можете дождаться ответа, чтобы сообщить вам, успешно он или нет. Это оставило меня в затруднительном положении.
    $.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
        }
    });

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

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

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});
 rajesh_kw02 июл. 2015 г., 14:06
ну, да, верните false или protectDefault или stopPropogation в зависимости от потребностей.
 Lie Ryan25 мар. 2019 г., 09:38
Чтобы быть немного более общим, вы можете использоватьevent.target.action а также$(event.target).serialize() вместо$('#form').attr('action') а также$('#form').serialize().
 Aaron Hoffman20 нояб. 2018 г., 17:45
Вам может понадобиться использоватьFormData($("myform")[0]) если вы пытаетесь ввести тип ввода = загрузка файла.
 Nate24 июл. 2014 г., 17:29
Вы можете захотетьevent.preventDefault(); (event = первый аргумент функции отправки) вместоreturn false, Возвращение false не только остановит отправку формы браузером, но и предотвратит возникновение других побочных эффектов, которые могут быть важны.Там являютсямного извопросы связанные св этот.

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

$.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
}

});

Опираясь на ответ @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 будет возвращен в случае успеха, поэтому я отображаю его и заменяю текущую страницу, и в моем случае я ожидаю перенаправление на страницу входа в систему, если время сеанса истекло, поэтому я перехватываю это перенаправление для того, чтобы сохранить состояние страницы.

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

 $(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 ()) внутри этого использования ('formid'). submit (function (event)), а затем предотвратите действие по умолчанию, вызывающее представление формы ajax $ .ajax ({,,, ,}); он будет принимать параметр, который вы можете выбрать в соответствии с вашими требованиями, а затем вызвать функцию успеха: function (data) {// сделать все, что вы хотите, чтобы мой пример поместил html ответа в div}

Ваш ответ на вопрос