Soy nuevo en JS
y estoy confundido en esto, post request
mediante AJAX
, querría saber si están bien mis comentarios y si estoy en lo correcto porque me confundo bastante, se abre un post request
y se le pasa 3 argumentos, string
que contenga la url
a la que se hace la petición, se le pasa data que son mis valores de mi formulario gracias a serialize()
y se guarda en data, ¿es obligatorio? hay que darle estas dos cosas para que luego me retorne no? me retornara success que es una función le paso un parámetro cualquiera, ¿en este caso datos corresponden a data? (información que rellene en los campos en forma de string). Así luego puedo hacer datos.saludo y me dará lo que necesito que es la respuesta, ¿es así?.¿Sabe alguien algún sitio con buena explicación de lo que busco? Mil gracias
$("form").on("submit", function( event ) { // Porque es on('submit') ???
alert( $( this ).serialize() ) // Crea una string de los elementos del formulario(form object)
event.preventDefault(); // evitar lo que pasaría por default así puedo enviar po ajax ???
// 1. open ajax request post (url im requesting / data from form(serializing) / datos que le pasare)
$.post({
//2. STRING que contenga la url a la que se hace la petición => JSON => {"saludo":"\u00a1Hola !, vengo desde el servidor.","teléfono":"Tu tel\u00e9fono es el ","horario":"No te llamaremos si no es en horario de ","apunte":"\u00a1Una pena que tengas tan poca satisfacci\u00f3n!"}
url:'http://cosasdigitales.com/documentacion/validarFormulario.php',
//3. OBJETO puro o STRING que es enviado al servidor para la peticion(campoNombre=fran&campoTelefono=61999&horario=ma%C3%B1anas&satisfaccion=10&politica=on)
data: $(this).serialize(),
//4. FUNCIÓN que retorna la información, la respuesta de ajax (le paso lo que sea, datos sera mi objeto y saludo mi propiedad => datos.saludo), 'success' = KEYWORD!
//RESPUESTA => ¡Hola fran!, vengo desde el servidor.<br>Tu teléfono es el 61999<br>No te llamaremos si no es en horario de mañanas<br>¡Una pena que tengas tan poca satisfacción!
success: function(datos) {
let texto = datos.saludo + '<br>' + datos.telefono + '<br>' + datos.horario + '<br>' + datos.apunte;
msg(texto, 1);
console.log(texto);
}
});
});
function msg(mensajes, tiempo) {
$('#mensaje').html(mensajes);
$('#alertas').addClass('visibles');
setTimeout( function(){
$('#alertas').removeClass('visibles');
},tiempo * 1000);
}
body {
background: #F2F3EB;
font-family: 'PT Sans', Arial, sans-serif;
}
h1 {
color: #474544;
font-size: 32px;
font-weight: 700;
letter-spacing: 7px;
text-align: center;
text-transform: uppercase;
}
h4 {
margin: 36px 0 10px;
letter-spacing: 1px;
font-weight: lighter;
}
h4:first-of-type {
margin: 0 0 10px;
}
.underline {
border-bottom: solid 2px #474544;
margin: 0 auto 10px;
width: 80px;
}
form {
overflow: hidden;
}
fieldset {
width: calc(48% - 9px);
float: left;
border: 1px solid #eee;
padding: 5px 20px;
margin: 0 12px;
overflow: hidden;
}
main {
border: solid 3px #474544;
max-width: 768px;
margin: 60px auto;
position: relative;
}
main *,
main *:before,
main *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
width: 100%;
border: 2px solid #555;
padding: 10px;
background: transparent;
}
input[type=text],
input[type=submit],
input[type=password],
input[type=range],
textarea {
background: none;
border: none;
border-bottom: solid 2px #474544;
color: #474544;
font-size: 1.000em;
font-weight: 400;
letter-spacing: 1px;
margin: 0em 0 1.875em 0;
padding: 0 0 0.875em 0;
text-transform: none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type=text],
input[type=submit],
input[type=password],
input[type=range],
textarea {
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
input[type=text]:active,
input[type=text]:focus,
input[type=password]:active,
input[type=password]:focus,
textarea:active,
textarea:focus {
outline: none;
padding: 1em 0 1em 0;
}
input[type=range] {
border: none;
margin-top: 10px
}
textarea {
height: 85px;
}
input[type=submit] {
background-color: #474544;
border-top: 2px solid #F2F3EB;
border-bottom: 2px solid #F2F3EB;
color: #F2F3EB;
cursor: pointer;
font-size: 1.4em;
padding: 10px 18px;
margin-top: 25px
}
input[type=submit]:hover {
background-color: #F2F3EB;
border-top: 2px solid #474544;
border-bottom: 2px solid #474544;
color: #474544;
}
label {
color: #555;
display: block;
font-size: 14px;
}
fieldset:nth-child(6) label {
width: 50%;
float: left;
padding: 5px;
display: block;
}
form > span {
text-align: center;
font-size: 52px;
display: block;
margin-bottom: 39px;
font-weight: 00;
border-bottom: 2px dashed #555;
padding-bottom: 29px;
}
form > label {
text-align: center;
float: left;
width: 100%;
margin: 20px 0 0px;
}
.error {
border-bottom: 2px dashed red !important;
}
#alertas {
background: grey;
position: fixed;
top: 100px;
right: 0;
transition: all .5s;
transform: translateX(100%);
}
#alertas.visibles{
transform: translateX(0);
}
#mensaje {
padding: 12px 10px;
border: 2px dashed #F2F3EB;
margin: 10px 35px;
color: #F2F3EB;
text-align: center;
width: 400px;
font-size: 14px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario Javascript</title>
<meta charset="UTF8"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<main>
<div>
<form action="gestor.php" method="POST">
<h1>• ¿Hablamos? •</h1>
<div class="underline"></div>
<span>☏</span>
<fieldset>
<label>Nombre:
<input type="text" id="campoNombre" name="campoNombre">
</label>
<label>Teléfono:
<input type="text" id="campoTelefono" name="campoTelefono">
</label>
</fieldset>
<fieldset>
<h4>Horario de contacto</h4>
<label>
<input type="radio" name="horario" value="mañanas">Mañanas
</label>
<label>
<input type="radio" name="horario" value="tardes">Tardes
</label>
<label>
<input type="radio" name="horario" value="indiferente">Indiferente
</label>
<h4>Nivel de satisfacción con la aplicación</h4>
<input type="range" min="0" max="100" value="0" id="satisfaccion" name="satisfaccion">
</fieldset>
<label>
<input type="checkbox" id="politica" name="politica"> Acepto la política de datos
</label>
<input type="submit" value="Enviar con AJAX">
<p class="respuesta"></p>
</form>
</div>
<div id="alertas">
<p id="mensaje">Enviar con AJAX</p>
</div>
</main>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>