¿Cómo usaría jQuery para ajaxify un formulario?

Question

Estoy tratando de AJAXIFICAR un formulario sin utilizar los complementos de jQuery. ¿Cuál es el proceso para hacer que esto suceda? Tengo mi forma. ¿A qué debería establecer la acción? ¿Cuál debería ser el script del encabezado? Tenga en cuenta que no quiero usar ningún complemento. Solo necesito un algoritmo básico para ajaxificar formularios usando jquery.

Answer 1

La acción debería ser whatever it would be if you weren't using JavaScript.

NB: Los enlaces de abajo todo se vaya a la sección correspondiente de la documentación de jQuery)

allí tendría que bind a function to the submit caso de que serialized los datos del formulario y que se utiliza para hacer una Ajax request (probablemente reading the URI from the action attribute). Tendría que prevent the default action para enviar eventos.

Creo que jQuery establece un encabezado HTTP X-Requerido-Con. Entonces solo necesita modificar su proceso del lado del servidor para devolver datos diferentes si eso está presente (con el valor correcto). Esto podría ser tan simple como cambiar a una vista diferente (si está usando un patrón MVC).

Answer 2

Depende. Si lo que desea es enviar sus valores sin volver a cargar la página, le sugiero que enlaza el caso de la forma someterse a una función como tal

jQuery('form#myForm').bind(submitValues); 

Después de esto, usted entonces ajustar la función

function submitValues() { 
    //do stuff here 
    jQuery.ajax({ 
     //your ajax parameters here 
    }); 

    //this is important to cancel the default action on submit (ergo. go to the address as defined in action 
    return false; 
} 

Para obtener más información sobre el comando ajax, busque here

Answer 3

El método más simple es utilizar el método $ .load().

$ .load (acción, de datos, de devolución de llamada)

La acción podría ser un script PHP, ASP, o simplemente otra página Web. Si los datos son nulos, realiza un GET. De lo contrario, realiza una POST. El método de devolución de llamada se ejecuta cuando el método está completo (no necesariamente exitoso).

http://docs.jquery.com/Ajax/load

Por ejemplo:

<form> 
    $.load("scripts/processOrder.php", { item: itemID, quantity: ordered }, function { 
     window.location.href = "orderComplete.htm"; 
    }); 
</form> 

Cuando se envía el formulario, el script ProcessOrder se ejecuta con el ItemID y ordenó argumentos pasados ​​como datos. Cuando la secuencia de comandos finaliza, el navegador navega a la página orderComplete para procesamiento adicional o visualización de estado.

Si desea tener más control sobre la Ajaxificación, puede usar los métodos $ .get, $ .post o $ .ajax.