procesar y mostrar resultados de un form con ajax

[pataslocas]

Hola amigos, tengo una duda como puedo procesar un form con ajax un ejemplo

si hay un input llamado nombre y al procesarlo imprima el nombre de ese input

[Alexis88]

Para mostrar el nombre del <input> o el valor escrito en él, no es necesario realizar una petición asíncrona (AJAX). Basta con que selecciones al elemento, accedas a su propiedad name, para el nombre, o a value, para obtener el valor escrito. Una vez hecho esto, podrás imprimirlo en donde gustes.

Ahora, si te refieres a mostrar el valor escrito en la misma página pero después de haber procesado el formulario y evitando recargar la ventana, entonces, la petición asíncrona sería así:

Código HTML:

<form id="foo" action="ejemplo.php">
    <label for="txtPalabra">Escriba una palabra:</label>
    <input type="text" name="palabra" id="txtPalabra" />
    <input type="submit" />
</form>
 
<span id="bar"></span>
 

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    this.querySelector("#foo").addEventListener("submit", function(event){
        event.preventDefault();
 
        var xhr = new XMLHttpRequest();
 
        xhr.open("GET", this.action + "?palabra=" + this.palabra.value);
        xhr.addEventListener("load", function(){
            if (this.status == 200){
                document.querySelector("#bar").textContent = this.responseText;
            }
        }, false);
        xhr.send();
    }, false);
});
 

Código PHP:

echo $_GET['palabra'];
 

Como la parte concerniente a HTML y PHP es evidente, te explicaré el código JavaScript:

1. Establezco una función anónima que contiene al conjunto de acciones que llevaré a cabo. Estas se realizarán luego de que haya cargado el modelo de objetos del documento (DOM).
2. Una vez sucedido esto, selecciono al formulario por su id y registro en él al evento submit, mismo que se produce cuando se realiza el procesamiento del contenido del formulario. Una función anónima se ejecutará en cuanto se produzca dicho evento.
3. Al momento de ocurrir lo anterior, cancelo el curso natural del evento utilizando el método .preventDefault() para evitar que la ventana se recargue.
4. Creo una instancia del objeto XMLHttpRequest del cual utilizaré sus métodos para realizar la petición asíncrona (AJAX).
5. Utilizando el método .open(), inicio la petición mediante el método HTTP GET, enviando la información hacia la dirección establecida en el atributo action del formulario. Como notarás, adjunto a dicha dirección una cadena de consulta que contiene el nombre de la variable con el que llegará el dato al archivo PHP, además del dato el cual es tomado desde la caja de texto de nombre "palabra".
6. Registro el evento load en la instancia previamente creada para ejecutar una función anónima una vez completado el proceso. En ella evalúo la siguiente condición: si el código HTTP del estado del proceso es igual a 200 (la respuesta fue recepcionada exitosamente), procedo a tomar al <span> ubicado después del formulario y, mediante su propiedad textContent, establezco como contenido al valor recibido.
7. Finalmente, ejecuto el envío del dato escrito mediante el método .send().

Si tienes dudas acerca del uso de los métodos y propiedades descritas, te recomiendo visitar la documentación ofrecida por Mozilla en la siguiente dirección: https://developer.mozilla.org/es