Ejemplo de jQuery Ajax POST con PHP
Estoy intentando enviar datos desde un formulario a una base de datos. Este es el formulario que estoy utilizando:
<form name="foo" action="form.php" method="POST" id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
El enfoque típico sería enviar el formulario, pero esto hace que el navegador se redirija. Usando jQuery y Ajax, ¿es posible capturar todos los datos del formulario y enviarlos a un script PHP (un ejemplo, form.php)?
652
3
El uso básico de
.ajax
sería algo así:HTML:
jQuery:
*Nota: Desde jQuery 1.8,
.success()
,.error()
y.complete()
están obsoletos en favor de.done()
,.fail()
y.always()
.*Nota: Recuerde que el fragmento de arriba tiene que hacerse después del DOM ready, por lo que debe ponerlo dentro de un manejador
$(document).ready()
(o usar la abreviatura$()
).Consejo: Puedes encadenar los manejadores de devolución de llamada así:
$.ajax().done().fail().always();
PHP (es decir, form.php):
Nota: Siempre sanear los datos publicados, para evitar inyecciones y otros códigos maliciosos.
También puede utilizar la abreviatura
.post
en lugar de.ajax
en el código JavaScript anterior:Nota: El código JavaScript anterior está hecho para funcionar con jQuery 1.8 y posteriores, pero debería funcionar con versiones anteriores hasta jQuery 1.5..
Para hacer una petición Ajax usando jQuery puedes hacerlo con el siguiente código.
HTML:
JavaScript:
**Método 1
**Método 2
Los callbacks
.success()
,.error()
y.complete()
están obsoletos a partir de jQuery 1.8. Para preparar su código para su eventual eliminación, utilice.done()
,.fail()
y.always()
en su lugar.MDN: abort()
. Si la petición ya ha sido enviada, este método abortará la petición.Así que hemos enviado con éxito una petición Ajax, y ahora es el momento de agarrar los datos al servidor.
PHP
Como hacemos una petición POST en una llamada Ajax (
type: "post"), ahora podemos agarrar los datos usando ya sea
$_REQUESTo
$_POST`:También puedes ver lo que obtienes en la petición POST simplemente con cualquiera de los dos. Por cierto, asegúrese de que
$_POST
está configurado. De lo contrario, obtendrá un error.Y usted está insertando un valor en la base de datos. Asegúrate de que estás sensibilizando o escapando todas las peticiones (tanto si has hecho un GET como un POST) correctamente antes de hacer la consulta. Lo mejor sería usar prepared statements.
Y si quieres devolver algún dato a la página, puedes hacerlo simplemente haciendo eco de esos datos como abajo.
Y entonces usted puede obtener como:
Hay un par de métodos abreviados. Puedes usar el código de abajo. Hace el mismo trabajo.
Puedes utilizar serializar. A continuación se muestra un ejemplo.