Skip to main content
se añadieron 1345 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257
        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);
        });
        var frm=$( "#idFormulario" ); //Identificamos el formulario por su id
        var datos = frm.serialize();  //Serializamos sus datos

        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
        });

        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
                            
            
         });
        request.fail(function(jqXHR, textStatus) {
            alert("Hubo un error: " + textStatus);
        });
        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);
        });
se añadieron 1345 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

##Ejemplo de una petición var frm=$( "#idFormulario"

###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

        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: datadatos,                //Variable serializada más arriba 
            dataType: "json"            //puede ser de otro tipo
        });

        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
                            
            
        });
        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);

?>

##Ejemplo de una petición var frm=$( "#idFormulario" );

    var request = $.ajax({
        url: frm.prop("action"),
        method: frm.prop('method'),
        data: data,
        dataType: "json" //puede ser de otro tipo
    });

    request.done(function(respuesta) {
        console.log(respuesta);
        //Tratamos a respuesta según sea el tipo  y la estructura                           
        
    });
    request.fail(function(jqXHR, textStatus) {
        alert("Hubo un error: " + textStatus);
    });

##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

        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
        });

        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
                            
            
        });
        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);

?>
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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 var frm=$( "#idFormulario" );

    var request = $.ajax({
        url: frm.prop("action"),
        method: frm.prop('method'),
        data: data,
        dataType: "json" //puede ser de otro tipo
    });

    request.done(function(respuesta) {
        console.log(respuesta);
        //Tratamos a respuesta según sea el tipo  y la estructura                           
        
    });
    request.fail(function(jqXHR, textStatus) {
        alert("Hubo un error: " + textStatus);
    });