XMLHttpRequest to Post HTML Form

Configuración actual

Tengo un formulario HTML como ese.

<form id="demo-form" action="POST" method="post-handler.php"> <input type="text" name="name" value="previousValue"/> <button type="submit" name="action" value="dosomething">Update</button> </form> 

Puedo tener muchos de estos formularios en una página.

Mi pregunta

¿Cómo presento este formulario de manera asincrónica y no me networkingirigen ni renuevo la página? Sé cómo usar XMLHttpRequest . El problema que tengo es recuperar los datos del HTML en javascript para luego ponerlos en una cadena de request posterior. Aquí está el método que estoy usando actualmente para mi zXMLHttpRequest`s.

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

Entonces, por ejemplo, digamos que se llamó al método javascript demoRequest() cuando se hizo clic en el button de envío del formulario, ¿cómo demoRequest() a los valores de los formularios desde este método para luego agregarlo a XMLHttpRequest ?

EDITAR

Tratando de implementar una solución a partir de una respuesta a continuación, he modificado mi formulario de ese modo.

 <form id="demo-form"> <input type="text" name="name" value="previousValue"/> <button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button> </form> 

Sin embargo, onclick en el button todavía está tratando de networkingirigirme (a donde no estoy seguro) y mi método no se llama?

Botón de escucha de events

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

El formatting de cadena POST es el siguiente:

 name=value&name2=value2&name3=value3 

Entonces debes tomar todos los nombres, sus valores y ponerlos en ese formatting. Puede iterar todos los elementos de input u get elementos específicos llamando a document.getElementById() .

Advertencia: debe usar encodeURIComponent() para todos los nombres y especialmente para los valores de manera que lo posible & contenido en las cadenas no rompa el formatting.

Ejemplo:

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

Otra opción mucho más simple sería usar objects FormData . Tal object puede contener pares de nombre y valor.

Afortunadamente, podemos build un object FormData partir de un formulario existente y podemos enviarlo directamente al método send () de XMLHttpRequest :

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

La respuesta de ComFreek es correcta, pero falta un ejemplo completo.

Por lo tanto, he escrito un fragment de trabajo extremadamente simplificado:

 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/> <script> "use strict"; function submitForm(oFormElement) { var xhr = new XMLHttpRequest(); xhr.onload = function(){ alert (xhr.responseText); } xhr.open (oFormElement.method, oFormElement.action, true); xhr.send (new FormData (oFormElement)); return false; } </script> </head> <body> <form method="POST" action="post-handler.php" onsubmit="return submitForm(this);" > <input type="text" name="name" value="previousValue"/> <input type="submit" value="Update"/> </form> </body> </html> 

Este fragment es básico y no puede usar GET . Me inspiré en la excelente Documentación de Mozilla . Obtenga una lectura más profunda de esta documentation de MDN para hacer más. Ver también esta respuesta usando formAction .

Por cierto, he usado el siguiente código para enviar el formulario en la request 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, solo quieres algo como:

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

Desea componer un object de datos que tenga pares key-valor, algo así como

 name=John&lastName=Smith&age=3 

A continuación, envíela con request.send ("name = John & lastName = Smith & age = 3");

Yo también tuve este problema, creo.

Tengo un elemento de input con un button. El método onclick del button usa XMLHTTPRequest para POST una request al server, todo codificado en JavaScript.

Cuando envolví la input y el button en un formulario, se utilizó la propiedad de acción del formulario. El button no fue type=submit que forma mi lectura del estándar HTML ( https://html.spec.whatwg.org/#attributes-for-form-submission ) debería ser.

Pero lo resolví anulando el método form.onsubmit así:

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

Estaba usando FireFox Developer Edition y Chrome 38.0.2125.111 Ubuntu 14.04 (290379) (64 bits).

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

¿Cómo puedo publicar los valores de y y z aquí desde el formulario