5

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>&bull; ¿Hablamos? &bull;</h1>
				<div class="underline"></div>
				<span>&#9743;</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>

2 respuestas 2

3

para hacer una petición con ajax, es de la siguiente manera:

//se utiliza $.ajax(), a la cual se le pasa un objeto {}, con la información
$.ajax({
    type:"POST", // la variable type guarda el tipo de la peticion GET,POST,..
    url:"http://ruta", //url guarda la ruta hacia donde se hace la peticion
    data:{nombre:"pepe",edad:10}, // data recive un objeto con la informacion que se enviara al servidor
    success:function(datos){ //success es una funcion que se utiliza si el servidor retorna informacion
         console.log(datos.promedio)
     },
    dataType: dataType // El tipo de datos esperados del servidor. Valor predeterminado: Intelligent Guess (xml, json, script, text, html).
})
  • La variable data es opcional utilizarla, puede ser el caso de que agas una peticion al servidor, y no envies datos , pero si los recivas o no.
  • La función success igual puede que no la utilices, es opcional, el caso seria que realices una petición al servidor donde envíes datos, pero no recibas información del mismo.

mas informacion: https://api.jquery.com/jquery.post/

3

Vamos a explicar post según la documentación de jQuery:

Descripción: carga datos desde el servidor usando una solicitud HTTP POST.

Estos son los parámetros, explicados, que puede tener una petición POST:

  • url

    Tipo: String

    Una cadena que contiene la URL a la que se envía la solicitud.

  • data

    Tipo: PlainObject o String

    Un objeto simple o cadena que se envía al servidor con la solicitud.

  • success

    Tipo: Función (datos de PlainObject, String textStatus, jqXHR jqXHR)

    Una función de devolución de llamada que se ejecuta si la solicitud tiene éxito. Obligatorio si se proporciona dataType, pero puede ser nulo en ese caso.

  • dataType

    Tipo: Cadena

    El tipo de datos esperados del servidor.

    Valor predeterminado: Intelligent Guess (xml, json, script, text, html).

post en la documentación de jQuery


Observaciones

Desde jQuery 3, success se considera obsoleto. Se recomienda usar done.


Ejemplo de una petición

HTML (formulario)

    <form action="archivo.php" method="post" id="idFormulario">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="user_name">
        </div>
        <div>
            <label for="mail">E-mail:</label>
            <input type="email" id="mail" name="user_mail">
        </div>
        <div>
            <label for="msg">Message:</label>
            <textarea id="msg" name="user_message"></textarea>
        </div>
    </form>

jQuery/Javascript

        var frm=$( "#idFormulario" ); //Identificamos el formulario por su id
        var datos = frm.serialize();  //Serializamos sus datos

        //Preparamos la petición Ajax
        var request = $.ajax({
            url: frm.prop("action"),    //Leerá la url en la etiqueta action del formulario (archivo.php)
            method: frm.prop('method'), //Leerá el método en etiqueta method del formulario
            data: datos,                //Variable serializada más arriba 
            dataType: "json"            //puede ser de otro tipo
        });

        //Este bloque se ejecutará si no hay error en la petición
        request.done(function(respuesta) {
            console.log(respuesta);
            console.log(respuesta.foo); //foo es una propiedad (clave), del json que devuelve el servidor
            //Tratamos a respuesta según sea el tipo  y la estructura               
        });

        //Este bloque se ejecuta si hay un error
        request.fail(function(jqXHR, textStatus) {
            alert("Hubo un error: " + textStatus);
        });

PHP (archivo.php)

El servidor responde con un objeto JSON, que es manejado en el done de la petición Ajax:

<?php

    $arrRespuesta = array(
        "foo" => "valor de bar",
        "bar" => "valor de foo",
    );

    echo json_encode($arrRespuesta);

?>
2
  • El OP quiere aclarar las dudas de $.post() no de $.ajax(), no son diferentes los parámetros, etc? Commented el 20 dic. 2017 a las 20:35
  • 1
    @CamiloVasquez mira esta pregunta y los comentarios. Su duda en realidad es sobre una petición post usando Ajax.
    – A. Cedano
    Commented el 20 dic. 2017 a las 20:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.