XMLHttpRequest per inviare il modulo HTML

Impostazione corrente

Ho un modulo HTML come questo.

Potrei avere molte di queste forms su una pagina.

La mia domanda

Come posso inviare questo modulo in modo asincrono e non essere reindirizzato o aggiornare la pagina? So come usare XMLHttpRequest . Il problema che ho è il recupero dei dati dal codice HTML in javascript per poi inserire in una stringa di richiesta post. Ecco il metodo che sto attualmente usando per il mio zXMLHttpRequest`.

 function getHttpRequest() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } function demoRequest() { var request = getHttpRequest(); request.onreadystatechange=function() { if (request.readyState == 4 && request.status == 200) { console.log("Response Received"); } } request.open("POST","post-handler.php",true); request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send("action=dosomething"); } 

Ad esempio, per esempio, è stato chiamato il metodo javascript demoRequest() quando è stato fatto clic sul pulsante di invio del modulo, come posso accedere ai valori del modulo da questo metodo per aggiungerlo a XMLHttpRequest ?

MODIFICARE

Cercando di implementare una soluzione da una risposta qui sotto ho modificato il mio modulo in questo modo.

 

Tuttavia, facendo clic sul pulsante, sta ancora tentando di reindirizzarmi (verso il punto in cui non sono sicuro) e il mio metodo non viene chiamato?

Listener di eventi Button

 document.getElementById('updateBtn').addEventListener('click', function (evt) { evt.preventDefault(); // Do something updateProperties(); return false; }); 

Il formato della stringa POST è il seguente:

 name=value&name2=value2&name3=value3 

Quindi devi prendere tutti i nomi, i loro valori e metterli in quel formato. È ansible iterare tutti gli elementi di input o ottenere quelli specifici chiamando document.getElementById() .

Attenzione: devi usare encodeURIComponent() per tutti i nomi e soprattutto per i valori in modo che ansible & contenuto nelle stringhe non interrompa il formato.

Esempio:

 var input = document.getElementById("my-input-id"); var inputData = encodeURIComponent(input.value); request.send("action=dosomething&" + input.name + "=" + inputData); 

Un’altra opzione molto più semplice sarebbe quella di utilizzare oggetti FormData . Un tale object può contenere coppie di nomi e valori.

Fortunatamente, possiamo build un object FormData da un modulo esistente e possiamo inviarlo direttamente al metodo send () di XMLHttpRequest :

 var formData = new FormData( document.getElementById("my-form-id") ); xhr.send(formData); 

La risposta di ComFreek è corretta ma manca un esempio completo.

Pertanto ho scritto uno snippet di lavoro estremamente semplificato:

        

Questo snippet è di base e non può utilizzare GET . Sono stato ispirato dall’eccellente documentazione di Mozilla . Leggi più approfonditamente questa documentazione MDN per fare di più. Vedi anche questa risposta usando formAction .

Dal modo in cui ho usato il seguente codice per inviare il modulo in richiesta Ajax.

  $('form[id=demo-form]').submit(function (event) { if (request) { request.abort(); } // setup some local variables var $form = $(this); // let's select and cache all the fields var $inputs = $form.find("input, select, button, textarea"); // serialize the data in the form var serializedData = $form.serialize(); // fire off the request to specific url var request = $.ajax({ url : "URL TO POST FORM", type: "post", data: serializedData }); // callback handler that will be called on success request.done(function (response, textStatus, jqXHR){ }); // callback handler that will be called on failure request.fail(function (jqXHR, textStatus, errorThrown){ }); // callback handler that will be called regardless // if the request failed or succeeded request.always(function () { // reenable the inputs }); // prevent default posting of form event.preventDefault(); }); 

Con Javascript puro, vuoi solo qualcosa come:

 var val = document.getElementById("inputFieldID").value; 

Vuoi comporre un object dati che abbia coppie di valori-chiave, un po ‘come

 name=John&lastName=Smith&age=3 

Quindi invialo con request.send (“name = John & lastName = Smith & age = 3”);

Ho avuto anche questo problema, penso.

Ho un elemento di input con un pulsante. Il metodo onclick del pulsante utilizza XMLHTTPRequest per POST una richiesta al server, il tutto codificato in JavaScript.

Quando ho spostato l’input e il pulsante in un modulo, è stata utilizzata la proprietà dell’azione del modulo. Il pulsante non era type=submit quale forma la mia lettura dello standard HTML ( https://html.spec.whatwg.org/#attributes-for-form-submission ) dovrebbe essere.

Ma l’ho risolto sovrascrivendo il metodo form.onsubmit modo:

 form.onsubmit = function(E){return false;} 

Stavo usando l’edizione per sviluppatori FireFox e chromium 38.0.2125.111 Ubuntu 14.04 (290379) (64-bit).

 function postt(){ var http = new XMLHttpRequest(); var y = document.getElementById("user").value; var z = document.getElementById("pass").value; var postdata= "username=y&password=z"; //Probably need the escape method for values here, like you did http.open("POST", "chat.php", true); //Send the proper header information along with the request http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.setRequestHeader("Content-length", postdata.length); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(postdata); } 

come posso postare i valori di y e z qui dal modulo