Ajax, jQuery y PHP es una combinación de las que molan. Te permite, con relativamente poco esfuerzo, crear aplicaciones interactivas, dinámicas y atractivas. Y si añadimos JSON como formato de intercambio de datos la cosa aún se pone mejor. En este tutorial vamos a ver un pequeño ejemplo, explicado paso a paso, de todo esto junto y funcionando: jQuery, Ajax, PHP y JSON. Si queréis saltaros la explicación, podéis ir directamente al ejemplo.

NOTA: Para continuar con este tutorial deberías tener conocimientos básicos de PHP y jQuery.

¿Qué es Ajax y que es JSON?

Ajax son las siglas de Asynchronous JavaScript And XML y es una tecnología que permite a una página web actualizarse de forma dinámica sin que tenga que recargarse completamente. JavaScript es el encargado de comunicarse con el servidor enviando y recibiendo datos desde la página web, en el servidor la solicitud es procesada y se envía una respuesta que es interpretada de nuevo por JavaScript en la página web.

Aunque con Ajax se puede solicitar cualquier tipo de recurso web, el intercambio de datos entre la página web y el servidor ha sido realizado tradicionalmente, como el propio nombre indica, en formato XML (eXtensible Markup Language), un lenguaje de marcas que permite definir una gramática específica y, por tanto, permite el intercambio de información estructurada y legible.

Y llegó JSON (JavaScript Object Notation), más ligero y con una notación más simple, y se convirtió en el formato más utilizado para el intercambio de datos cuándo se trabaja con Ajax. Además, con una ligera variación (JSONP) puede utilizarse en solicitudes Ajax entre diferentes dominios (cross-domain).

El formato JSON tiene la siguiente notación:

{key : value, key2 : value2, key3 : value3,...}

Y también puede ser serializado y multidimensional, por ejemplo:

[{key : value, key2 : value2, key3 : value3, key : { key : value, key2 : value2, key3 : value3} },{key : value, key2 : value2, key3 : value3,...}]

Puedes ver todas las especificaciones del formato JSON json.org.

JSON en PHP

En cualquier instalación estándar de PHP, desde la versión 5.2.0, se incorpora de forma predeterminada la extensión JSON y es muy fácil pasar los datos de un array a notación en JSON. Aunque si no se cuenta con esta extensión se puede construir la notación JSON de forma manual, es recomendable tenerla si vas a trabajar de forma frecuente con datos en formato JSON.

Entre las funciones de la extensión JSON para PHP que nos interesan, la más imprescindible es la función json_encode(). Con esta función podemos pasar nuestros datos a formado JSON rápida y fácilmente. Sólo es necesario tener los datos en forma de array u objeto. Por ejemplo:

<?php

$jsondata = array();

if( isset($_GET['param']) ) {

    if( $_GET['param'] == 'valor' ) {

        $jsondata['success'] = true;
        $jsondata['message'] = 'Hola! El valor recibido es correcto.';

    } else {

        $jsondata['success'] = false;
        $jsondata['message'] = 'Hola! El valor recibido no es correcto.';

    }

    //Aunque el content-type no sea un problema en la mayoría de casos, es recomendable especificarlo
    header('Content-type: application/json; charset=utf-8');
    echo json_encode($jsondata);
    exit();

}

Ajax con JSON y jQuery

Uno de los argumentos del método jQuery.ajax() es dataType y aquí podemos especificar que vamos a utilizar datos JSON en la respuesta. Si no especificamos nada en dataType, jQuery intetará detectar de forma automática el formato de los datos recibidos. Si en la respuesta desde el servidor se especifica, como hicimos en el ejemplo anterior, el tipo de contenido, será más fácil para jQuery tratar los datos correctamente. Utilizando jQuery.ajax() tendría un aspecto similar a:

$.ajax({
    // En data puedes utilizar un objeto JSON, un array o un query string
    data: {"parametro1" : "valor1", "parametro2" : "valor2"},
    //Cambiar a type: POST si necesario
    type: "GET",
    // Formato de datos que se espera en la respuesta
    dataType: "json",
    // URL a la que se enviará la solicitud Ajax
    url: "script.php",
})
 .done(function( data, textStatus, jqXHR ) {
     if ( console && console.log ) {
         console.log( "La solicitud se ha completado correctamente." );
     }
 })
 .fail(function( jqXHR, textStatus, errorThrown ) {
     if ( console && console.log ) {
         console.log( "La solicitud a fallado: " +  textStatus);
     }
});

Además del método anterior, podemos utilizar el atajo getJSON(), que quedaría de esta forma para hacer exactamente lo mismo:

$.getJSON( "script.php", { "parametro1" : "valor1", "parametro2" : "valor2" } )
    .done(function( data, textStatus, jqXHR ) {
        if ( console && console.log ) {
            console.log( "La solicitud se ha completado correctamente." );
        }
    })
    .fail(function( jqXHR, textStatus, errorThrown ) {
        if ( console && console.log ) {
            console.log( "Algo ha fallado: " +  textStatus" );
        }
});

Ten en cuenta que .getJSON(), como su nombre indica, siempre hace una solicitud con el método GET, si necesitas enviar la solicitud mediante método POST tendrás que utilizar otras funciones de jQuery como .ajax() con el argumento type puesto a POST o su alias .post(). Por ejemplo:

$.ajax({
    data: {"parametro1" : "valor1", "parametro2" : "valor2"},
    type: "POST",
    dataType: "json",
    url: "script.php",
})
 .done(function( data, textStatus, jqXHR ) {
     if ( console && console.log ) {
         console.log( "La solicitud se ha completado correctamente." );
     }
 })
 .fail(function( jqXHR, textStatus, errorThrown ) {
     if ( console && console.log ) {
         console.log( "La solicitud a fallado: " +  textStatus);
     }
});

//Equivalente a lo anterior
$.post( "script.php", { "parametro1" : "valor1", "parametro2" : "valor2" }, null, "json" )
    .done(function( data, textStatus, jqXHR ) {
        if ( console && console.log ) {
            console.log( "La solicitud se ha completado correctamente." );
        }
    })
    .fail(function( jqXHR, textStatus, errorThrown ) {
        if ( console && console.log ) {
            console.log( "La solicitud a fallado: " +  textStatus);
        }
});

En el ejemplo PHP anterior, en el objeto JSON había dos miembros: success y message. Un posible objeto JSON recibido podría ser el siguiente:

{"success" : true, "message" : "Hola! El valor recibido es correcto."}

Este objeto es recibido en el método .done() a través del argumento data y podemos acceder al valor de cada miembro del objeto JSON del siguiente modo:

.done( function(data) {
    data.success;
    data.message;
});

Ejemplo paso a paso

Vamos a ver un ejemplo en el que vamos a realizar una solicitud ajax a un script PHP que interaccionará con una base de datos para buscar los registros de unos hipotéticos usuarios. El ejemplo lo he elaborado para cubrir varias posibilidades, entre ellas que se solicite sólo un registro de la base de datos o varios.

1

Base de datos

Primero preparamos una tabla dónde vamos a tener los datos de los usuarios. Para ello entra en phpMyAdmin o similar y ejecuta esta consulta para crear la tabla “cyb_users” con las columnas ID, username, email y url.

CREATE TABLE IF NOT EXISTS `cyb_users` (
  `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL DEFAULT '',
  `email` varchar(100) NOT NULL DEFAULT '',
  `url` varchar(100) NOT NULL DEFAULT '',
  PRIMARY KEY (`ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3;

Y luego creamos estos usuarios de ejemplo:

INSERT INTO `cyb_users` (`ID`, `username`, `email`, `url`) VALUES
(1, 'Paco', 'thisismy@email.com', 'http://miblog.name'),
(2, 'Juan', 'elcorreode@juan.com', 'http://www.misitio.com'),
(3, 'Ana', 'escribrea@ana.com', 'http://lawebdeana.com');

El JSON con el que vamos a trabajar tiene la siguiente estructura:

{
    "success" : true|false,
    "data"    : {
        "message" : "",
        "users"   : [{
            "ID"      : "",
            "username" : "",
            "email"    : "",
            "url"      : ""
        }, {...} ]
    }
}
2

El HTML

<!DOCTYPE html>
<html lang="es-ES">
<head>
  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-latest.js"></script>
  <script src="miscript.js"></script>
</head>
<body>
  <div><button data-user="1">Dame los datos de la persona con ID = 1</button> - <button data-user="[1,2,3]">Dame los datos de las personas con ID = 1, ID = 2 e ID = 3.</button> - <button data-user="0">Ningún usuario</button></div>
  <div id="response-container"></div>
</body>
</html>
3

jQuery: miscript.js

$(document).ready(function() {
    
    // getdeails será nuestra función para enviar la solicitud ajax    
    var getdetails = function(id) {
        
        return $.getJSON("personas.php", {
            
            "id": id
            
        });
        
    }
    
    // Al hacer click sobre cualquier elemento que tenga el atributo data-user.....
    $('[data-user]').click(function(e) {
        
        // Detenemos el comportamiento normal del evento click sobre el elemento clicado
        e.preventDefault();
        
        // Mostramos texto de que la solicitud está en curso
        $("#response-container").html("<p>Buscando...</p>");
        
        // this hace referencia al elemento que ha lanzado el evento click
        // con el método .data('user') obtenemos el valor del atributo data-user de dicho elemento y lo pasamos a la función getdetails definida anteriormente
        getdetails( $(this).data('user') )
        
        .done(function(response) {
            
            //done() es ejecutada cuándo se recibe la respuesta del servidor. response es el objeto JSON recibido
            if (response.success) {
                
                var output = "<h1>" + response.data.message + "</h1>";
                
                // recorremos cada usuario
                $.each(response.data.users, function(key, value) {
                    
                    output += "<h2>Detalles del usuario " + value['ID'] + "</h2>";
                    
                    // recorremos los valores de cada usuario
                    $.each(value, function(userkey, uservalue) {
                        
                        output += '<ul>';
                        output += '<li>' + userkey + ': ' + uservalue + "</li>";
                        output += '</ul>';
                        
                    });
                    
                });
                
                // Actualizamos el HTML del elemento con id="#response-container"
                $("#response-container").html(output);
                
                } else {
                
                //response.success no es true
                $("#response-container").html('No ha habido suerte: ' + response.data.message);
                
            }
            
        })
        
        .fail(function(jqXHR, textStatus, errorThrown) {
            
            $("#response-container").html("Algo ha fallado: " + textStatus);
            
        });
        
    });
    
});
4

PHP: personas.php

Este es el script PHP que se encargará de procesar la soclitud Ajax, consultará a la base de datos en busca de los detalles de los usuarios solicitados y devolverá el resultado en formato JSON. En las líneas 12 – 15 debes poner los datos de acceso a tu base datos.

<?php
if( isset($_GET['id']) ) {
  get_persons($_GET['id']);
} else {
  die("Solicitud no válida.");
}

function get_persons( $id ) {
 
  //Cambia por los detalles de tu base datos
  $dbserver = "localhost";
  $dbuser = "usuario_basededatos";
  $password = "password_basededatos";
  $dbname = "nombre_basededatos";
 
  $database = new mysqli($dbserver, $dbuser, $password, $dbname);

  if($database->connect_errno) {
    die("No se pudo conectar a la base de datos");
  }

  $jsondata = array();
 
  //Sanitize ipnut y preparar query
  if( is_array($id) ) {
    $id = array_map('intval', $id);
    $querywhere = "WHERE `ID` IN (" . implode( ',', $id ) . ")";
  } else {
    $id = intval($id);
    $querywhere = "WHERE `ID` = " . $id;
  }
 
  if ( $result = $database->query( "SELECT * FROM `cyb_users` " . $querywhere ) ) {

  if( $result->num_rows > 0 ) {

    $jsondata["success"] = true;
    $jsondata["data"]["message"] = sprintf("Se han encontrado %d usuarios", $result->num_rows);
    $jsondata["data"]["users"] = array();
    while( $row = $result->fetch_object() ) {
       //$jsondata["data"]["users"][] es un array no asociativo. Tendremos que utilizar JSON_FORCE_OBJECT en json_enconde
       //si no queremos recibir un array en lugar de un objeto JSON en la respuesta
       //ver http://www.php.net/manual/es/function.json-encode.php para más info
       $jsondata["data"]["users"][] = $row;
     }
 
   } else {
 
     $jsondata["success"] = false;
     $jsondata["data"] = array(
       'message' => 'No se encontró ningún resultado.'
     );
 
   }
 
   $result->close();
 
  } else {
 
    $jsondata["success"] = false;
    $jsondata["data"] = array(
      'message' => $database->error
    );
 
  }
 
  header('Content-type: application/json; charset=utf-8');
  echo json_encode($jsondata, JSON_FORCE_OBJECT);
 
  $database->close();
 
}

exit();
Descarga el ejemplo de Ajax con jQuery, JSON y PHP
  • Patroclo

    muy buen tutorial

  • Daniel

    Hola tengo una duda, cuando el texto almacenado en JSON es muy grande y al momento de llamarlo para mostrarlo en la app me aparece todo de corrido sin formato de texto, como poder hacerle para que respete párrafos y quizá algunas palabras en negritas, si me explico? Maquetarlo para que se vea atractivo. Se puede? Espero puedas orientarme, gracias.

    • Aunque jSON está más pensado para intercambio de datos que para su marcado o presentación, no hay ningún problema en tener HTML en JSON, por lo que puedes tener párrafos, <p>, y negritas, <strong> o <b>, o lo que quieras.

  • Hector ortiz escobar

    Una consulta… tengo un input text en el cual quiero que me recoja los datos de el mismo y me los envíe a la base de datos y los resultados me los ponga en un select, Gracias de antemano… el ejemplo que pido sería algo así como el autocomplete de ajax.

  • sylarlocke .

    Excelente tutorial, muy bien explicado cada uno de los conceptos, aunque quizás hubiese echado solo en falta que añadiedes otro tipo de datos que se envían en el $.ajax(), como son:
    contentType: false, // The content type used when sending data to the server.
    cache: false, // To unable request pages to be cached
    processData:false // To send DOMDocument or non processed data file it is set to false

    Precisamente he llegado a su hilo buscando información de la cache de Ajax, ya que tenía un problema que no se actualizaba, por defecto parece que se activa en true, he tenido que forzarlo en false.

    Igualmente un tutorial genial.

    Saludos

    • Gracias por tu comentario y por la sugerencia.

      El método jQuery.ajax() tiene más de 30 parámetros y casi una decena de atajos, como $.get(), $.post(), $.getScript(), $.getJSON() o $.load().

      Sin contar con funciones que pueden afectarle, como $.ajaxSetup() o $.ajaxPrefilter(), y funciones para interceptar eventos dentro de la solicitud ajax, como $.ajaxTransport() o $.ajaxSend().

      Mira lo largo que es ya el tuto, imposible abarcarlo tooooooodo. Mi objetivo era explicar un ejemplo básico, aunque en profundidad, para sentar las bases para temas más profundos.

      En concreto, sobre el tipo de datos enviados, el tipo de datos aceptado de forma universal en una solicitud puede ser application/x-www-form-urlencoded, multipart/form-data o text/plain.

      Cuándo se utiliza un tipo diferente, hay implicaciones que la mayoría de la gente no conoce.

      Por ejemplo, supongamos que haces una solicitud tipo post con un tipo de contenido JSON. Ahora, no podrás acceder a los datos enviados en la superglobal $_POST de PHP sino que tienes que acceder al body de la solicitud con file_get_contents('php://input').

      Además, si es una solicitud cross-domain y se uiliza un tipo de contenido en la solicitud diferente a los antes mencionados, los navegadores harán una solicitud previa tipo OPTIONS para ver si el navegador acepta la solicitud y es seguro realizarla. Hará lo que se conoce como una solicitud preflight.

      Sería incapaz de meterme a explicar el parámetro contentType sin explicar sus implicaciones.

      ¿Te imaginas si hago eso con cada uno de los parámetros? Seguro que me da para un libro. Jajajaja.

    • sylarlocke .

      Hola, gracias por su rápida y completa respuesta.

      Pues no sabía que tuviese tanto parámetros, ya me has aclarado otra duda xD, por lo que veo tiene un gran potencial el método $.ajax() y a lo mejor a veces el desconocimiento nos puede hacer invertir tiempo en algo que ya está hecho para dar una solución.

      Pero llevas razón esto da para un libro jaja, esto nunca termina, yo soy partidaria de hasta que no me encuentre con el problema no buscar información, porque se vuelve uno loco jaja.

      Muchas gracias Juan por la ayuda 🙂

  • Pablo

    Hola Juan! Me alegra saber que eres Granaíno como yo 🙂

    En primer lugar gracias por post. Creo que es bastante útil.

    Por otro lado quería hacerte una pregunta. Actualmente me encuentro trabajando en un proyecto en el que estoy desarrollando una aplicación de un osciloscopio. La parte del cliente (interfaz) está hecha y utiliza peticiones GET y POST a la url que se le indique para obtener los datos y para actualizar si existe algún cambio desde la GUI. En la parte del servidor tengo un archivo llamado “data” en el que se encuentran todos los datos que necesito en formato JSON, y recientemente me he dado cuenta de que necesito implementar un módulo que, cuando reciba la petición POST del cliente, permita realizar operaciones y cambios en este archivo “data” y posteriormente devolverlo en la respuesta de la petición.

    Para ello, ¿sólo necesitaría usar el código de php “personas.php” cambiándole las acciones a realizar y el direccionamiento hacia el documento “data”? O me recomiendas algún otro método. Siento si puede ser una pregunta tonta, pero tengo pocos conocimientos sobre php…

    El archivo data sigue la estructura de la imagen:
    https://uploads.disquscdn.com/images/efca324f2c9d08951612ac946b11b3c96556441cfabc94bc3f49445daaa58d74.jpg

    La petición POST del servidor como se describe a continuación:

    $.ajax({
          type: 'POST',
          url: post_url,
          data: JSON.stringify({ datasets: { params: params.local } }),
          timeout: (use_long_timeout ? long_timeout : request_timeout),
          cache: false
        })
        .done(function(dresult) {
          // OK: Load the params received as POST result
          if(dresult.datasets !== undefined && dresult.datasets.params !== undefined) {
          
            // Use the provided min/max values only once after AUTO button was clicked
            if(auto_flag == 1 && dresult.datasets.params.min_y !== dresult.datasets.params.max_y) {
              var options = plot.getOptions();
              
              options.xaxes[0].min = dresult.datasets.params.xmin;
              options.xaxes[0].max = dresult.datasets.params.xmax;
              options.yaxes[0].min = dresult.datasets.params.min_y;
              options.yaxes[0].max = dresult.datasets.params.max_y;
              
              // Enable both channels after click on AUTO button
              if(!$('#btn_ch1').data('checked') || !$('#btn_ch2').data('checked')) {
                $('#btn_ch1').data('checked', true).removeClass('btn-default').addClass('btn-primary');
                $('#btn_ch2').data('checked', true).removeClass('btn-default').addClass('btn-primary');
                redrawPlot();
              }
              // Both channels are already active, do a quick redraw
              else {
                plot.setupGrid();
                plot.draw();
              }
            }
          
            if(auto_flag == 0 && dresult.datasets.params.forcex_flag == 1) {
              var options = plot.getOptions();
              
              options.xaxes[0].min = dresult.datasets.params.xmin;
              options.xaxes[0].max = dresult.datasets.params.xmax;
             
              plot.setupGrid();
              plot.draw();
            }      
          
            loadParams(dresult.datasets.params);
            updateTriggerSlider();
            
            if(refresh_data && !downloading) {
              updateGraphData();
            } 
          }
          else if(dresult.status == 'ERROR') {
            showModalError((dresult.reason ? dresult.reason : 'Error while sending data (E1).'), false, true, true);
            send_que = false;
          }
          else {
            showModalError('Error while sending data (E2).', false, true, true);
          }
        })
        .fail(function() {
          showModalError('Error while sending data (E3).', false, true, true);
        })
        .always(function() {
          sending = false;
          user_editing = false;
          
          if(send_que) {
            send_que = false;
            setTimeout(function(refresh_data) {
              sendParams(refresh_data);
            }, 100);
          }
        });
      }

    ¡Un saludo!

    • No se si entiendo muy bien tu duda. Puedes enviar la solicitud Ajax a dónde quieras. Si vas a procesar la solicitud en “personas.php” pues la envías ahí, si se va a procesar en otro script pues lo envías a otro. No sé si te pillo.

  • Betto

    Hola, he probado todos los ejemplos, pero no logro que me funcione. Tengo una URL que entrega un resultado en JSON cuándo se envía un número

    Necesito un Ajax para mostrar los resultados.

  • luis

    Hola, saludos. Tengo una duda. Tengo un arreglo del lado del cliente en js pero ahora lo quiero mandar al el controlador de phalcon y ahí procesar la info para almacenar la info contenida en ese arreglo, espero alguien pueda ayudarme, actualmente tengo una función como la siguiente:

    $.ajax({
    url: "/elinea/plantillasfactura/guardarCoor",
    data: $("array_elem_guardar").serializeArray(),
    //data: "datos=" + miJSON,
    method: "POST",
    success: function(data)
    {
    $("#modalCrudPhalcon .modal-body").html("").html(
    "<p class='alert alert-success'>Plantilla guardado correctamente.</p>"
    );
    $("#onclickBtn").hide();
    console.log(data);
    },
    error: function(error)
    {
    console.log(error);
    }
    });

  • Israel Duran

    Que tal, soy nuevo en jQuery. Te cuento que hago mi llamada con ajax que me trae de respuesta un html creado dinámicamente con php, no creo que esté tan mal mi forma de hacerlo, bueno asocio la función a varios links que cargan los empleados correspondientes a ésa área.

    Todo bien, cargan mis empleados pero mi menú desplegable Bootstrap deja de funcionar. No abre, mis ventanas emergentes no abren, un reloj que programé en js deja de funcionar, un buscador que puse con jQuery UI también deja de funcionar. No sé cuál es el problema. Pienso que es mi ajax por que antes de traerme los datos con ajax todo funciona correctamente. La verdad no se que hago mal, te pongo un poco de mi código por si puedes darme un comentario;

    $(function(){
    $("a.boguardias").on("click",function(event){
    event.stopPropagation();
    var ide=$(this).attr("id");
    var str = ide;
    var res = new Array();
    var res = str.split("-");
    var idd=res[1];
    var divi='#carggaempleados'+idd;
    $.ajax({
    async :true,
    data: {id: idd},
    cache:true,
    dataType : 'html',
    url: 'http://www.miweb.com/intranet/recursos-humanos/empleadosajax',
    type: 'post',
    beforeSend: function () {
    alertify.success("Cargando información espere un momento..");
    },
    success: function (response){
    $(divi).html(response);
    alertify.success("Ha cargado la información con éxito");
    },
    complete: function (response){
    alertify.log("OK");
    return false;
    },
    error: function (){
    alertify.log("Ha ocurrido un error, intentelo más tarde");
    }
    });
    return false;

    });

    Crees que sería mejor con json?

    Saludos. Gacias de antemano.

    • Bryan

      todo lo que completes con html o innerhtml no te reconocera js, me ha pasado

    • Gonzalo2683

      Probablemente tengas que delegar los eventos que estes usando para estos nuevos elementos que agregas al DOM, por que no existen referencias a esos elementos al ser añadidos después, para jquery(bootstrap plugins) no existen. Ref: https://learn.jquery.com/events/event-delegation/

  • Mario F. Rodríguez R

    Excelente tío!! Gracias por el artículo, me has sacado de un tremendo atolladero!!

  • AMC

    Hola amigo, sabes que estoy editando un script que me pasaron que arroja datos obtenidos desde un .JSON por HTML. El problema de esto es que arroja todos los datos que están en la tabla, y yo quiero que el usuario sólo vea por el que preguntó. De esta manera arroja los datos: http://prntscr.com/9jrt0x Yo quiero que mediante un formulario, el usuario indique el nombre y se muestren esos datos, preservando la seguridad del resto.
    El problema es que esto es una consulta externa al servidor, yo consigo los datos a través de http://enlace/carpeta/bans.json?callback=?. Se puede hacer algo como lo que yo quiero? Si es así estaría eternamente agradecido de tu ayuda.
    Te dejaré el código del script a ver si encuentras algo, saludos y gracias de antemano: http://pastebin.com/S6bPH9Xd

  • Dalmiro Farinello

    amigo una pregunta, yo estoy haciendo una red social tipo facebook (lo hago para poder practicar) y en la parte de conectados necesito que me devuelva 2 valores por JSON, el numero de conectados sacado de mysql_num_rows y los datos de los usuarios.

    Este es mi código JavaScipt:

    var get_connect = function(){
    $.getJSON("http://localhost/red/verify_connect.php", {'id_v': })
    .done(function(response){
    if(response.success){
    $("#num_c").text(response.num_cont);
    $("info_conectados").html(response.dats.result);
    }else{
    $("#info_conectados").html("Al parecer hubo un error al cargar tus amigos :(")
    }
    })
    .fail(function( jqXHR, textStatus, errorThrown ) {
    $("#info_conectados").html("Algo ha fallado: " + textStatus + " " + errorThrown);
    });
    }

    setInterval(get_connect, 5000);

    Y este el PHP:

    require_once("connection/core.php");
    mysqli_select_db($connect, $database) or die(mysql_error());
    $r_json = array();
    if(is_int($_POST['id_v'])){
    $id = $_POST['id_v'];
    $query_s = "SELECT A.idUE, A.idUR, A.nameE, A.nameR FROM amistades A LEFT JOIN reg_users R ON R.idUser = A.idUE OR R.idUser = A.idUR WHERE R.idUser = '".$id."' AND R.estate_actived = 1";
    $result = mysqli_query($connect, $query_s) or die(mysql_error());
    if($result){
    if(mysqli_num_rows($result) > 0){
    $r_json['success'] = true;
    $r_json['num_cont'] = mysqli_num_rows($result);
    $r_json['dats']['result'] = array();
    while($d = mysqli_fetch_object($result)){
    if($d->idUE == $id){
    $r_json['dats']['result'][] = $d->nameR.'';
    }else if($d->idUR == $id){
    $r_json['dats']['result'][] = $d->nameE.'';
    }
    }
    header("Content-type: application/json; charset=utf-8");
    echo json_encode($r_json, JSON_FORCE_OBJECT);
    }else{
    header("Content-type: application/json; charset=utf-8");
    $r_json['success'] = true;
    $r_json['num_cont'] = 0;
    $r_json['dats']['result'] = 'No hay conectados';
    echo json_encode($r_json);
    }

    }
    }

    espero no sea molestia :/

    • Dalmiro Farinello

      PD: me da este error por la funcion .fail() de parte de errorThrow = SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

    • Ese error lo dice todo: los datos que recibes tienen unan sintaxis JSON errónea. ¿Puedes poner la respuesta que recibes?

      PD: el error no es reproducible con el código que has compartido.

  • AlexisGüere

    Buenas hermano, muy completa la info, tengo una consulta que hacer, disculpa si no es pertinente, tengo un sistema donde me muevo entre pantallas usando la funcion load de jquery sobre un div, descubri, que los nodos de los elementos DOM no se colocan o se actualizan al html principal, en una funcion de consulta, donde solicito datos con la funcion ajax para validar datos en un php, he debido “anidar” otras funciones ajax en los html que pido o cargo, para poder usar las variables de las consultas, no se si estoy siendo claro, hago 2 consultas (o mas) exactamente iguales, una dentro de la funcion callback de la otra o en el html que cargo, mi consulta es, si hay alguna forma mas optima de hacer esto, muchas gracias de antemano.

    • Pues no sabría decirte sin ver la aplicación que has montado, pero en un principio la respuesta es: Si, se puede mejorar, todo siempre es mejorable.

      Podrías intentar hacer lo mismo que haces en el frontend pero en el servidor de forma que con una sola solicitud te devuelva exactamente lo que quieres sin necesidad de hacer varias solicitudes encadenadas; en lugar de hacer una solicitud, recibir variables y con esas variables hacer otra solicitud, utiliza los resultados de la primera solicitud directamente en PHP para generar exactamente la respuesta que necesitas. Pero como te digo, sin ver la aplicación no te puedo decir que es lo mejor.

  • JuanMuñoz

    Saludos

    Antes de todo muchas gracias por tu guia, esta muy detallada en cuanto al funcionamiento mediante ajax

    Tengo una duda respecto a la seguridad en las consultas, por ejemplo yo tengo el script
    $.post('php/usuario.php',{operacion:1} ,procesamientoDeDatos,'json');
    todo correctamente, pero estaba mirando las opciones de desarrollo del navegador donde puedo ver la consulta y su contenido.
    Y me sorprendo al ver que puedo modificar los valores que envio directamente desde alli y el servidor realiza la consulta que inyecte.

    Me gustaria saber si, sabes como evitar ese problema en la seguridad

    Gracias

    • Buenos días,

      Para mí no es ninguna sorpresa, para eso son precisamente las herramientas de desarrollo de los navegadores. Y es una prueba irrefutable de que la seguridad de una aplicación nunca debe basarse en comprobaciones client-side, sino que siempre han de ser server-side. Puedes hacer también comprobaciones client-side, buenos motivos para hacerlo hay muchos, pero nunca han de sustituir a las comprobaciones server-side.

  • yayo

    utilié tu script, pero si tengo un datepickers (calendario jquery), como hago para validarlo con el dia de la facha donde das click y un campo especifico de mysql, al combinarlo me trae toda la tabla

  • Hector

    Hola Juan, gracias por tu artículo, no tengo mucha práctica en ajax y tengo una consulta básica, quiero que el resultado de mi ajax:

    $.post( “script.php”, { “parametro1” : “valor1”, “parametro2” : “valor2” }, null, “json” )

    me almacene el resultado en una variable. Es decir, mi “script.php” luego de procesar los parámetros enviados me devuelve un valor, y ese valor lo quiero almacenar en una variable javascript. La mayoría de ejemplos que he encontrado ponen:

    function( data, textStatus, jqXHR ) {

    y luego hacen algo, pero ninguno almacena el valor del resultado en una variable (debe ser tan simple que nadie lo hace 🙂

    ¿puedes ayudarme?

    Gracias!

    • Si que es básica tu pregunta, y me da que pensar que ni siquera has leído el post ni estudiado el ejemplo. O puede que simplemente no entiendas lo que es Ajax. No se por dónde empezar a contestarte.

      Primero, tienes que tener claro que JavaScript y PHP son dos contextos distintos. No puedes alamacenar una variable de uno en otro sino que tienes que enviar esa información entre ellos mediante algún protocolo de comunicación que ambos entiendan, generalmente el protocolo HTTP.

      Ajax funciona así:

      1.- Desde JavaScript (que se ejecuta en el navegador del usuario) envias una solicitud HTTP al servidor (que utiliza PHP en este caso)
      2.- El servidor (PHP) devuelve una respuesta HTTP. En esta respuesta incluimos la información que queramos.
      3.- JavaScript recibe esa respuesta y ya con ella trabajamos de nuevo en el navegador mediante JavaScript.

      Como ves, no puedes guardar una variable PHP en JavaScript, son dos contextos diferentes (navegador y servidor) y ambos se comunican mediante el protocolo HTTP. Lo que hace Ajax es realizar esta comunicación de forma asíncrona.

      La respuesta desde el servidor puede ser en el formato que tu quieras: HTML, XML, JSON, …. y según el formato de la respuesta, así tendrás que tratarla en JavaScript. Esta respuesta se recibe en el parámetro data de la función jQuery que mencionabas:

      function( data, textStatus, jqXHR ) {

      Es decir, data contiene la respuesta enviada desde PHP. En el caso del ejemplo es un objeto JSON que se construyó a partir de la variable $jsondata en PHP.

      No se si ahora lo tienes más claro.

    • Hector

      Gracias Juan, logré hacerlo poco después de hacerte la pregunta y seguir intentando, es decir, mi el resultado de mi script.php ya lo recibo de manera asíncrona en una variable javascript y ya la puedo tratar (imprimir, comparar, etc), ahora estoy estancado en un segundo inconveniente: no logro leerla cuando el resultado de mi script.php es un array y no un simple valor, cuando la imprimo me sale la palabra “Array”, pero no puedo leer cada uno de sus elementos, probaré con la función json_encode pero no estoy seguro. Si puedes lanzarme una idea te la agradeceré.

      Sé que lo mío es muy básico pero hago lo que puedo ya que hace tiempo que no veo programación a detalle 🙂

      Saludos,

  • Darío Sebastián Arizabalo

    Juan, excelente artículo, muchas gracias. Te quisiera pedir un consejo ya que siempre trabajé en aplicacioners grandes, y hace muy poco me incursioné en PHP para aplicaciones de menor envergadura.

    Inicialmente, usé con unos templates que me pasó un amigo de aplicaciones web que usan PHP, html5 y algo de boostrap para los estilos (nada de ajax, demasiado básico para mi gusto).

    Estoy refactorizando la aplicación, más que nada para una satisfacción personal, de dejar algo bien hecho y mi idea es usar tres capas, o algo parecido:
    Pantalla: html5, jquery ajax, PHP?(esta es mi duda y consulta)
    Servicios: una especie de web services con PHP, con servicios lo más atómicos posibles.
    DB: Procedures en Mysql

    Mi pregunta surge, en que inicialmente, yo hacía las cargas con PHP, y renderizaba las tablas con un foreach de los resultados de la query, pero si lo cambiara por jquery ajax, ya el html estaría renderizado.
    ¿Qué me recomendarias para las tablas que se cargan al iniciar una página? ¿PHP ajax? ¿ó jquery ajax + (mustache o handlebars)?

    Perdón por abusar de tu buena predisposición a responder todas las consultas, pero después de ver varios de tus artículos, creo estar consultandole a la persona indicada.

    Desde ya muchas gracias!
    Saludos.

    • No se si entiendo tu consulta. Cuándo dices:

      Pantalla: html5, jquery ajax, PHP? (esta es mi duda y consulta)

      ¿Te refieres a ejecutar PHP en el lado del cliente? Quiero decir, ¿en el navegador/pantalla del usuario? Si es así, andas un poco perdido. PHP es para el servidor, no se ejecuta en el lado del cliente. Por tanto, no hay nada parecido a PHP Ajax, así no tienes que preguntarte “¿PHP ajax? ¿ó jquery ajax + (mustache o handlebars)?”, ya tienes la respuesta.

      Me explico.

      Ajax, como se dice en el post, es el acrónimo de Asynchronous JavaScript And XML. Cómo su nombre indica es JavaScript (client-side, en este post implementado a través de jQuery, una biblioteca/framework JavaScript). PHP, por su parte, se ejecuta en el servidor (server-side) y procesa y responde a las solicitudes Ajax como lo hace a cualquier otra.

      Es decir, es en el frontend donde Ajax existe y hace la magia enviando solicitudes al servidor e interpretando su respuesta de forma asíncrona, sin tener que recargar la página completamente de nuevo.

      En tu caso, con los datos que das, creo que tendrías que tener PHP+MySQL en el server y en el frontend puedes tener jQuery+Ajax. Exactamente como el ejemplo del post. Si necesitas información de la base datos, envias la solicitud meidante Ajax al servidor, PHP hace la consulta a la base de datos y devuelve la respuesta. Recibes la información contenida en esa respuesta y ya haces con ella lo que quieras: por ejemplo, insertarla en una plantilla HTML de Mustache como sugieres.

      Y por cierto, PHP es hoy por hoy uno de los lenguajes de programación más utilizados en aplicaciones web, algunas tan grandes como Facebook o WikiPedia. No sé por qué tienes ese concepto de “PHP para aplicaciones menores”.

    • Darío Sebastián Arizabalo

      Juan,
      Perdón por los malos entendidos:

      Cuando digo “Pantalla” me refiero a generar html, yo genero html con php, y justamente, la tabla que contiene los resultados, lo hago con un loop que inserta TRs. De todas formas, ya lo decidí y lo voy a hacer asincrónico, con un “loading” inicial y disparando la consulta en el “ready”.
      Y sí, tenés razón, no era necesario usar ajax en PHP.

      Cuando dije que utilizo PHP para aplicaciones más chicas, quise decir, que es mucho más facil hacerlo en PHP que en Java, tecnología a la que estoy acostumbrado a usar.

      Muchas gracias por tu respuesta, me sirvió para replantear mis ideas y ver una mejor solución.

      Off topic: te quisiera preguntar si tenés algún ejemplo para el manejo de scripts de linux desde PHP, y/o el uso de los comandos de dbase, ambos en versiones superiores a 5.4? Contrate un servidor vhost y no tengo posibilidades de modificar los archivos de configuración de PHP.

      Saludos!

  • Michael

    Excelente explicación me resulto muy util, sigue así, muchas gracias

  • alberto carlos oliva

    hola Juan, me encuentro en un problema que no logro solucionar,( te aclaro que no hace mucho que empece con esto de programar y me agrada realmente hacerlo,),
    actualmente estoy incursionando en angularjs , ya hice una parte de mi proyecto en localhost que se trata de vistas que se muestran segun el contenido ,(como “productos” y “detalle de producto”),-se entiende?-,,bueno,,lo que trato de hacer y no lo logro es que a traves de un formulario un usuario pueda ingresar datos de un producto , como: color, tamaño, etc. (o sea que ingrese una publicacion),y estos datos se almacenen en un archivo json, asi despues lo puedo desplegar en mis vistas,(necesito que esten en json porque mi proyecto asi lo pide), sera que se puede? agradesco toda ayuda.

    • Buenos días Alberto. Lo siento mucho, muchísimo de verdad, pero tu consulta no es sobre el tema tratado en este post y tengo una regla de oro: mantener las conversaciones on topic. De todas formas no tengo experiencia con AngularJS y no se si podría ayudarte, aunque echando un vistazo rápido a la documentación de AngularJS, obtener los datos de un formulario en formato json parece muy fácil.

    • alberto carlos oliva

      gracias Juan igual por la rapida respuesta,,en realidad no necesariamente tendria que hacer el formulario con angular, ya que lo podria utilizar desde una pagina basica de php, (esa es mi idea ,, no hacerlo con angular al formulario),, y la pregunta formulada aca fue solo porque encontre el tema de json que esta en discusion aca y lo vi bastante parecido a lo que busco,, solo que en ves de leer el json, que eso lo tengo definido , yo necesito grabar,(no se si esta bien dicho grabar),los datos que recibo del formulario en archivo json, ( desplegarlo en mi vista lo tengo solucionado ya) gracias igual, y muy buena tu explicacion del tema arriba, saludos.

    • En W3Schools hay un tutorial sobre creación de archivos en PHP que te puede venir bien; es muy básico pero para que empieces está bastante bien: PHP 5 File Create/Write.

      De todas formas, creo que deberías plantearte el uso de una base de datos para guardar a información en lugar de utilizar archivos. Consultar una base de datos es mucho más ligero, eficiente y rápido que abrir y leer archivos.

  • Carlos Felipe Silva Espinoza

    Entonces si creo jQuery que asigne un valor a un texbox html para luego resivirlo por $_post con php tendre usar ajax ?

    • Cuesta un poco entender tu comentario pero si lo he entendido bien, la respuesta es no; no tienes por qué utilizar ajax si no quieres. ¿Por qué piensas que es obligatorio? No se si te entiendo.

  • El Neto

    Gracias por la aclaracion, tengo una nueva duda, veo en tu entrada que utiizas arrays multidimensionales a partir de $jsondata = array(); asi construyes $jsondata["success"] y $jsondata["data"]["message"] y $jsondata["data"]["users"][].

    1. mi pregunta es: estaría mal crear este array $jsondata["info"]["message"] a partir de ya tener $jsondata["data"]["message"] ? a lo que me refiero es que el segundo nivel de profundidad del array ya esta ocupado por ["info"] y no puede “caerle encima” con ["data"], estoy en lo correcto?

    2. en todo caso lo que si estaria valido es hacer $jsondata["data"]["info"]["message"] ?

    3. $jsondata["data"] = array( 'message' => 'No se encontró ningún resultado.' ); es igual a $jsondata["data"]['message'] ?

    Lo digo porque me trabé con las declaraciones de los arrays en el ejemplo que expones, si eres tan amable…y te queda tiempo…me puedes decir cual es la lógica, me parece que utilizaste de más ya que no veo la necesidad de profundizar en $jsondata["data"]["message"] y en $jsondata["data"] = array( 'message' => 'No se encontró ningún resultado.'); tu sabes que entender la lógica de otro programador es de las partes que más cuesta.

    Adios.

    • El array para construir el JSON puede tener la estructura que quieras, la que más cómoda te sea. Yo elegí un array multidimensional con el ánimo de poner un ejemplo más completo, pero como digo, puedes utilizar la estructura que quieras. Luego esta estructura se reflejará en el JSON creado, tenlo en cuenta.

      El resto de tus preguntas son sobre notación de arrays en PHP, nada específico con JSON o con Ajax, igual te puede venir bien repasar el manual PHP sobre sintaxis de Arrays.

      1.- Puedes crear $jsondata["data"]["message"] y $jsondata["info"]["message"], como tu quieras, no es que la segunda dimensión esté ocupado por ["info"], de hecho ["info"] es un elemento en el primer nivel del array y este elemento es a su vez un array. Lo que pasaría si creas ambos es que tendrías el elemento ["info"] y el elmento ["data"] en tu array y, por consiguiente, en el JSON creado a partir de ese array.

      2.- Creo que ya quedó contestada con la explicación anterior.

      3.- // Hacer esto
      $jsondata["data"] = array(
      'message' => 'No se encontró ningún resultado.'
      );

      // es igual que hacer esto
      $jsondata["data"]['message'] = 'No se encontró ningún resultado.'

    • El Neto

      Gracias por la respuesta.

  • El Neto

    Hola, buenisimo tu ejemplo, solo tengo una duda: tu mandas estos datos en tu ejemplo en formato json: data: {"parametro1" : "valor1","parametro2" : "valor2"}, pero que tal si tengo demasiados datos? puedo utilizar el serialize y aplicarlo a los datos del formulario y luego especificar en datatype:json?

    • El parámetro data de las funciones Ajax de jQuery admite objetos JavaScript, un array o un query string. Lo puedes poner como quieras que jQuery lo convertirá a query string para su envío (los datos se envían siempre como query string, una cadena “param=value&param2=value2…”, cadena que se añade a la URL si la solicitud es tipo GET). La función .serialize() genera un query string, así que es totalmente válido.

      Lo que pasa es que creo que has confundido el parámetro dataType con el formato del parámetro data. data son los datos ha enviar, que ya he comentado antes los formatos que admite. dataType establece como jQuery debe tratar los datos que se recibirán en la respuesta Ajax. Si no pones nada en dataType, jQuery tratará los datos recibidos según la cabecera Content-type de la respuesta; si esta cabecera fue correctamente establecida, como hago en el ejemplo, puedes omitir dataType. Pero ten claro que no tiene nada que ver con el parámetro data.

      Gracias por la pregunta. A ver si tengo un poco de tiempo añado esta explicación al tutorial.

    • He leído el post y ya hablaba de esto en este párrafo:

      Uno de los argumentos del método jQuery.ajax() es dataType y aquí podemos especificar que vamos a utilizar datos JSON en la respuesta. Si no especificamos nada en dataType, jQuery intetará detectar de forma automática el formato de los datos recibidos.

      Pero de todas formas he añadido algunos comentarios aclaratorios más. Gracias de nuevo por la pregunta.

  • Jenny

    Hola! necesito ayuda para enviar nombre completo de la persona a una consulta integral en otra base de datos y que me devuelva en un array si la encuentra así como otros campos que requiero. Que tengo que utilizar para poder ejecutarla ?

    • Lo siento Jenny pero tu pregunta, tal y como está expuesta, es imposible de contestar. No sabría por dónde empezar. Si tienes alguna duda concreta sobre el tema de Ajax con jQuery, PHP y JSON, no dudes en hacerla, pero intenta ser clara y concisa para que pueda ayudarte.

    • Jenny

      Hola Juan, espero explicarme mejor, mira tengo que hacer desde PHP con Ajax una consulta del nombre completo (esos serían mis parámetros) a una base de datos integral (varias base de datos), y mediante json traer los datos de que si se encuentra o no esa persona en la base de datos integral, y en php mostrar el resultado de la consulta. Esa consulta la quiero ejecutar después de que el usuario guarda un registro de alguna persona y con ese nombre lanzar la búsqueda antes mencionada.

    • Lo siento Jenny pero de verdad no sé que esperas que te diga. En lugar de exponer lo que necesitas, expón cual es el problema que tienes para hacerlo. Por ejemplo, expón tu código y comenta dónde tienes problemas o dudas; de lo contrario tu consulta parece más una solicitud do the job for me. Espero que entiendas lo que quiero decir. Ten en cuenta que este blog está enfocado a desarrolladores con un mínimo de conocimientos de partida (tal y como se avisa al inicio de este tutorial); a partir del ejemplo del tutorial deberías ser capaz de hacer lo que comentas, si tienes un problema concreto, pregúntalo, estaré encantado de ayudare.

  • david

    Esta muy bien explicado y lo entiendo
    He montado el xampp en ubuntu, me bajo los archivos y he modificado la conexión del php correctamente, pero al ejecutarlo me salta Algo ha fallado: parsererror
    Entiendo que el fallo debe estar en que el parser no recibe correctamente los datos..pero no veo donde está el erro si no he modificado código. Can you help me?? xD

    • El parse error más comunes son errores sintaxis. Puede que al modificar el PHP hayas cometido algún pequeño error como olvidar algunas comillas, algún ; al final de la definición de una variable, o cosas así. Compruebalo.

  • victor

    muy util gracias, aun asi todavia ando comenzando con ajax, jquery y todo esto, estoy usando codeigniter y en un metodo ya hice mi consulta y lo devuelvo en formato json de la siguiente manera:

    {“promotoria”:”Campeche”,”agente”:”7005″,”periodo”:”1401″,”poliza”:”CWA143″,”asegurado”:”ESCALANTE MAGANA ROSA MARIA DE LA ASUNCION”,”retenedor”:”0105004″,”fe_captura”:”2014-01-22″}

    con un metodo hice mi peticion ajax, pero ahora cuando trato de mostrar los valores en mis campos de texto no los muestro, lo hago de la siguiente manera

    $("#promotoria").val(resp.promotoria);

    espero me puedan ayudar, gracias

    • Imposible de decirte con la informaciíon que das. El siguiente código funciona perfectamente:

      var resp = {"promotoria":"Campeche","agente":"7005","periodo":"1401","poliza":"CWA143","asegurado":"ESCALANTE MAGANA ROSA MARIA DE LA ASUNCION","retenedor":"0105004","fe_captura":"2014-01-22"}
      $("#promotoria").val(resp.promotoria);

      Si el ese objeto JSON es recibido correctamente en la variable resp, tal y como dices, tu problema no parece estar relacionado con Ajax ni JSON.

    • victor

      mil disculpas tienes razon, este es mi metodo en php para obtener los datos,

      $poliza = $this->input->post("search",true); //recibo la poliza de la vista
      $data = $this->Cds_model->getPoliza($poliza);//hago la consulta desde el modelo y lo retorno como un objeto
      //var_dump($data);
      echo json_encode($data);// lo convierto a formato json

      desde firebug al hacer la peticion ajax recibo esta respuesta

      {"promotoria":"Campeche","agente":"7005","periodo":"1401","poliza":"CWA143","asegurado":"ESCALANTE MAGANA ROSA MARIA DE LA ASUNCION","retenedor":"0105004","fe_captura":"2014-01-22"}

      el metodo de jquery que estoy usando es este

      function getPoliza(ruta,elementoorigen)
      {

      valor = $('#'+elementoorigen+'').val();
      if(valor == ""){
      jAlert("Favor de Ingresar una Poliza.","Poliza Invalida");}

      else{
      $.post(ruta,{search:valor,},function(resp)
      {
      $("#promotoria").val(resp.promotoria);
      });
      }
      }

      de cualquier manera voy a revisar de nuevo tu ejemplo con mas calma para poder entender mejor, muchas gracias por tu respuesta

    • victor

      al parecer ya quedo, solo me falto parsear el json

      json = $.parseJSON(resp);

    • Eso se debe a que la respuesta llega en forma de string y no como JSON. No es lo mismo esto (un string, una cadena de texto):

      var res = '{"promotoria":"Campeche","agente":"7005","periodo":"1401","poliza":"CWA143","asegurado":"ESCALANTE MAGANA ROSA MARIA DE LA ASUNCION","retenedor":"0105004","fe_captura":"2014-01-22"}';
      // No funcionará
      alert( resp.promotoria );
      resp = $.parseJSON( resp );
      // Ahora sí funciona
      alert( resp.promotoria );

      Que esto (un objeto JSON):

      var resp = {"promotoria":"Campeche","agente":"7005","periodo":"1401","poliza":"CWA143","asegurado":"ESCALANTE MAGANA ROSA MARIA DE LA ASUNCION","retenedor":"0105004","fe_captura":"2014-01-22"};
      // Correcto!!
      alert( resp.promotoria );

      Cómo se explica en el artículo, deberías establecer las cabeceras correctas en la respuesta. ¿Puedes comprobar las cabeceras de la respuesta? En caso de que no apareza Content-type: application/json puedes probar a:

      $data = $this->Cds_model->getPoliza($poliza);
      //Asumo que no ha habido aún ninguna salida desde el servidor en este punto
      header('Content-type: application/json; charset=utf-8');
      echo json_encode($data);

      Con esto no debería hacerte falta utilziar $.parseJSON. Ah, y comprueba también que en $data = $this->Cds_model->getPoliza($poliza); recibes correctamente un objeto o un array y no un string.

      Y también, como se dice en el post, sería coveniente decir a jQuery el tipo de datos que vas a utilizar, especialmente si desde el servidor no específicas el tipo de contenido, en el caso de $.post:

      $.post( ruta, {search:valor,}, function( resp ) {
      $("#promotoria").val( resp.promotoria );
      } , "json" );

      Ejem, parece que no te has leído mucho el post, eh?? 😉 (bromeando)

    • victor

      muchisimas gracias verifique los cambios que me comentas y todo funciono perfectamente, la verdad me base en un ejemplo que vi en un foro, como te comente apenas estoy iniciando en el campo de javascript hace unos momentos por fin pude cambiar el valor de un select con un valor del json, tarde 2 horas y al final me di cuenta de que estaba tratando de hacerlo por medio de un id y en el select no tenia id solo un name jajajajajajajajajajajaja pero ten por seguro que me instruire mas y a partir de hoy tiene un seguidor mas, gracias por todas tus atenciones

  • Saul Acuña

    Buenísima explicación, ahora estoy intentando adaptar todo lo recomendado, soy principiante el ajax y JSON, manejo bien PHP, por que me he dedicado a desarrollo de partes de proyectos solo en eso, pero ahora debo de hace mi propio proyecto y no puedo ensamblar un modulo desarrollado javaScript, que no desarrollé, valga la aclaración, y según conocidos, debo usar la combinación JSON=>AJAX=>PHP para para recuperar el dato que resulta del módulo especifico, seria tan amable de encenderme la luz que estoy necesitando, mi proyecto tiene un fuerte Backend, pero casi nada de Frontend, ya que conozco poco, pero me encuentro sobre la hora de la entrega del proyecto, seria la culminación de un estudio que llevo.
    La dinámica seria lo siguiente:
    * PHP=>Genera=>QR (Datos encriptados en QR)=>Identificador USER
    * USER presenta QR frente a cámara=>Lector QR (javaScritp) interpreta dato
    *Parte que no puedo enlazar
    *Dato se envía a PHP=>PHP desencripta dato
    *PHP consulta BBDD para identificar USER
    * User correcto=>PHP asigna lugar en estacionamiento
    * PHP registra en BBDD
    * PHP envía Asignación a Aduino
    * Arduino manipula sensores y / o luces según datos recibidos
    * Arduio responde a PHP
    Esto seria el resumen operativo del proyecto.-
    Lo único que estaria presisano seria: ¿Cómo conecto javaScript a PHP para el envío de datos interpretados?

    • Hola Saul. No se si entiendo tu pregunta. ¿Quieres hacer lo mismo que se hace en el tutorial pero sin utilizar jQuery sino utilizando JavaScript puro? Si quieres utilizar jQuery, deberías ser más específico y explicar que es lo que no has entendido del tutorial. Si es lo segundo pásate por Ajax con JSON en JavaScript puro.

  • Argentina

    Buenisimo idolo! Muy util y sobre todo super bien exxplicado, segui asi! abrazo!

  • Horacio Darinel Espinosa Barce

    Estupenda explicación, sólo me surgió una duda mientras hacia demasiadas peticiones ajax con $.ajax({//pasos}) lo que ocurre es que aveces como que se atora y aveces parece que no cargara todos los elementos que requieran de JQuery :/ es algo raro, todas las funciones ajax que manejo son tal como se explican en el sitio oficial y aquí pero aveces pasa, no siempre, ¿que me recomienda para evitar esta clase de bugs?, me podría decir si es necesario usar el event.preventDefault(); o que opción tengo aparte de realizar un mini preloader al hacer las peticiones?, espero su respuesta, gracias.

    • Yo siempre recomiendo ejecutar las solicitudes ajax en $(document).ready() y utilizar event.preventDefault() en caso de que la solicitud ajax sea lanzada por un evento que no quieres que se ejecute, por ejemplo clic en un enlace. Pero hacer estas dos cosas no garantiza que tus problemas se vayan a solucionar, es imposible de saber que ocurre sin ver el código. Puede incluso que el problema esté server-side y no en el código jQuery. Si pudieras dar un poco más de info …. por cierto, ¿cuántas solicitudes ajax realizas para decir que son demasiadas?

      Puedes también echar un vistazo a este arcículo ( https://cybmeta.com/manejo-de-errores-en-jquery-ajax/ ) sobre manejo de errores en jQuery.ajax() por si quieres ir haciendo un debug.

    • Horacio Darinel Espinosa Barce

      Muchas gracias por tu comentario, la verdad es código híbrido por así decirlo, creo scripts mediante PHP la verdad aún no encuentro porqué se sobrecargan las funciones, es como si se hicieras varias veces la misma función, algo raro, en fin logré solucionarlo creando un archivo externo del tipo js para mis jquery, ya que los hacia directamente desde PHP con echo para hacerlos dinámicos, bueno es algo raro de explicar y es mucho código como para posteartelo, muchas gracias de todas formas estoy checando el link que me diste, gracias, saludos.

  • Jorge Robledo

    Genial y funcional, bastente completo muchisimas gracias