Método POST con JQuery

jquery

jquery

Haciendo uso de la librería JQuery también podemos realizar acciones de envío y recepción de datos de formularios, componentes o valores, en este artículo veremos como podemos enviar mediante POST datos al Backend que tendremos en PHP mediante el método .post() disponible en JQuery para realizar tal cometido veamos:

Primero que todo tengamos en cuenta que este método cuenta con la siguiente sintaxis:

$.post(URL,data,callback);

Mediante la cual decimos el archivo que contiene el script a ejecutar (para nosotros en PHP), los datos que enviaremos en nuestra solicitud (Que no es obligatorio) y la respuesta de esta ejecución.

a continuación un ejemplo de como enviar valores de nuestra página a un archivo PHP, que solo devolverá los mismos datos como muestra de este ejemplo, ustedes podrán realizar inserciones, procesamientos con respecto a bases de datos:

FORMULARIO HTML

Código Html y JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>POST con JQuery</title>
<script src="js/jquery.min.js"></script>
<style>
.input {
padding: .2em;
margin: .5em 0 0 0;
}
.btn {
display: block;
margin: 1em 0;
}
</style>
</head>
<body>
<fieldset>
<legend>Nuevo Usuario</legend>
<label for="nombres">Nombres</label>
<input class="input" type="text" id="nombres"/>
<label for="apellidos">Apellidos</label>
<input class="input" type="text" id="apellidos"/>
<label for="direccion">Dirección</label>
<input class="input" type="text" id="direccion"/>
<label for="telefono">Teléfono</label>
<input class="input" type="text" id="telefono"/>
<button class="btn" id="enviar">Registrar</button>
</fieldset>
</body>
<script type="text/javascript">
$("#enviar").click(function(){
$.post("script.php",
{
nombres: $('#nombres').val(),
apellidos: $('#apellidos').val(),
direccion: $('#direccion').val(),
telefono: $('#telefono').val()
},
function(data, status){
alert("Valores: \n" + data + "\nEstatus: " + status);
});
});
</script>
</html>

Mensaje JavaScript

Como podemos ver nuestro script recibió los valores, los procesó y retornó la respuesta al FrontEnd, con un estado success que indica que todo ha salido correctamente.

Si deseas ver como iniciar en JQuery no olvides ver este artículo en el cual verás como iniciar muy rápido.

Hasta pronto!.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *