Come posso catturare la risposta di form.submit

Ho il codice seguente:

 function SubmitForm() { form1.submit(); } function ShowResponse() { }  . . .  

Voglio catturare la risposta html di form1.submit ? Come faccio a fare questo? Posso registrare qualsiasi funzione di callback per il metodo form1.submit?

Non sarai in grado di farlo facilmente con un semplice javascript. Quando si registra un modulo, gli input del modulo vengono inviati al server e la pagina viene aggiornata, i dati vengono gestiti sul lato server. Cioè, la funzione submit() realtà non restituisce nulla, invia semplicemente i dati del modulo al server.

Se vuoi davvero ottenere la risposta in Javascript (senza l’aggiornamento della pagina), dovrai utilizzare AJAX e, quando inizi a parlare dell’utilizzo di AJAX, dovrai utilizzare una libreria. jQuery è di gran lunga il più popolare e il mio preferito. C’è un ottimo plugin per jQuery chiamato Form che farà esattamente quello che sembra.

Ecco come useresti jQuery e quel plugin:

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

Un’alternativa Ajax consiste nell’impostare un invisibile come destinazione del tuo modulo e leggere il contenuto di tale nel suo gestore di onload . Ma perché preoccuparsi quando c’è l’Ajax?

Nota: volevo solo citare questa alternativa poiché alcune delle risposte affermano che è imansible ottenere questo risultato senza l’Ajax.

Lo sto facendo in questo modo e il suo funzionamento.

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

Non sono sicuro che tu capisca cosa submit () fa …

Quando fai form1.submit(); le informazioni del modulo vengono inviate al server web.

Il WebServer farà tutto ciò che dovrebbe fare e restituirà una nuova pagina web al client (solitamente la stessa pagina con qualcosa cambiato).

Quindi, non è ansible “catturare” il ritorno di un’azione form.submit ().

Non c’è callback. È come seguire un link.

Se vuoi catturare la risposta del server, usa AJAX o postalo su un Iframe e prendi ciò che appare lì dopo l’evento onload() dell’iframe.

Modo non jQuery, dal commento di 12me21:

 var xhr = new XMLHttpRequest(); xhr.open("POST", "/your/url/name.php"); xhr.onload = function(event){ alert("The server responded with: " + event.target.response); }; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData); 
  $.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 } }); 

Questo è il mio codice per questo problema:

 

Futuri ricercatori su Internet:

Per i nuovi browser (a partire dal 2018: Chrome, Firefox, Safari, Opera, Edge e la maggior parte dei browser mobili, ma non IE), fetch è un’API standard che semplifica le chiamate di rete asincrone (per le quali avevamo bisogno di XMLHttpRequest o di jQuery $.ajax ).

Ecco una forma tradizionale:

 

Se ti viene consegnata una forma come sopra (o la hai creata perché è semantica HTML), allora puoi avvolgere il codice di fetch in un listener di eventi come di seguito:

 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 }); }); 

(Oppure, se come il poster originale vuoi chiamarlo manualmente senza un evento submit, metti semplicemente il codice fetch lì e passa un riferimento all’elemento form invece di usare event.target .)

Documenti:

Recupera: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Altro: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Quella pagina nel 2018 non menziona fetch (ancora). Ma menziona che il trucco target = “myIFrame” è deprecato. E ha anche un esempio di form.addEventListener per l’evento ‘submit’.

Nel caso in cui desideri acquisire l’output di una richiesta AJAX utilizzando Chrome, puoi seguire questi semplici passaggi:

  1. Apri la casella degli strumenti Programmatori
  2. Vai alla console e destra ovunque all’interno
  3. Nel menu visualizzato, fai clic su “Abilita XMXHTTPRequest Logging”
  4. Dopo averlo fatto ogni volta che fai una richiesta AJAX, un messaggio che inizia con “XHR finished loading: http: // ……” apparirà nella tua console.
  5. Cliccando sul link che appare, verrà visualizzata la “scheda Risorse” in cui è ansible vedere le intestazioni e il contenuto della risposta!

È ansible event.preventDefault() nel gestore di clic per il pulsante di invio per garantire che l’evento di submit predefinito del modulo HTML non venga triggersto (che è ciò che porta all’aggiornamento della pagina).

Un’altra alternativa sarebbe usare il markup di hackier: è l’uso di

e type="submit" che sta intralciando il comportamento desiderato qui; poiché alla fine portano a eventi di clic che aggiornano la pagina.

Se si desidera utilizzare ancora

e non si desidera scrivere gestori di clic personalizzati, è ansible utilizzare il metodo ajax di jQuery, che astrae l’intero problema per te esponendo metodi di promise per il success , l’ error , ecc.


Per ricapitolare, puoi risolvere il tuo problema:

• prevenzione del comportamento predefinito nella funzione di gestione utilizzando event.preventDefault()

• utilizzando elementi che non hanno un comportamento predefinito (ad esempio

)

• usando jQuery ajax


(Ho appena notato che questa domanda risale al 2008, non sono sicuro del motivo per cui è comparsa nel mio feed, in ogni caso, si spera che questa sia una risposta chiara)

Basandosi sulla risposta di @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), gestisco gli errori di post del modulo e il successo:

  $('#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 : '')); } }); }); 

Faccio uso di this modo che la mia logica sia riusabile, mi aspetto che l’HTML venga restituito in modo corretto, quindi lo renderò e sostituirò la pagina corrente, e nel mio caso mi aspetto un reindirizzamento alla pagina di accesso se la sessione è scaduta, quindi intercetto quel reindirizzamento per preservare lo stato della pagina.

Ora gli utenti possono accedere tramite un’altra scheda e provare di nuovo a inviarli.

Puoi farlo usando la tecnologia javascript e AJAX. Dai un’occhiata a jquery e in questa forma plug in . È necessario includere solo due file js per registrare una richiamata per il modulo.submit.

Puoi farlo usando jQuery e il metodo ajax() :

   
  $(document).ready(function() { $('form').submit(function(event) { event.preventDefault(); $.ajax({ url : "",//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

il primo di tutti usa $ (document) .ready (function ()) all’interno di questo uso (‘formid’). submit (function (event)) e quindi previene l’azione predefinita aftyer che chiama ajax submission del modulo $ .ajax ({,,, ,}); ci vorrà parametro u puoi scegliere in base alle tue esigenze quindi chiamare un successo afunction: function (data) {// fai quello che vuoi il mio esempio per mettere risposta html su div}

Prima di tutto avremo bisogno di 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; }; 

quindi fai un post di base e ottieni una risposta

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

Ho seguito codice perfattamente eseguito utilizzando ajax con dati di modulo multiparte

 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!"); } }); // } 

È ansible utilizzare jQuery.post () e restituire risposte JSON ben strutturate dal server. Permette anche di convalidare / disinfettare i dati direttamente sul server, che è una buona pratica perché è più sicuro (e anche più semplice) rispetto a farlo sul client.

Per esempio se hai bisogno di inviare un modulo html al server (a saveprofilechanges.php) con i dati dell’utente per una semplice registrazione:

I. Parti del cliente:

Ia parte HTML:

 

Parte 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. Parte server (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; } } 

Devi usare AJAX. L’invio del modulo di solito comporta il caricamento di una nuova pagina nel browser.

puoi farlo senza ajax.

scrivi come di seguito.

.. .. ..

e poi in “action.php”

quindi dopo frmLogin.submit ();

leggi variabile $ submit_return ..

$ submit_return contiene il valore di ritorno.

in bocca al lupo.