1

Archivo: "pruebaJson.php"

<?php 
include "includes/header.php"; 
include 'includes/conexion.php';
?>

<!--Éstos dos span muestran los datos que recibo a través de AJAX y JSON.       Éstos datos son la imagen y el ID-->
<span id="respuesta1"></span>
<span id="respuesta2"></span>

<!--slider-->
<!--Aquí estoy mostrando todas las imágenes guardadas en mi BBDD-->
<?php
 $instruccion1="SELECT * FROM producto";
 $consulta1=mysqli_query($conexion, $instruccion1);
 ?>
 <div class="slider-container">
    <div class="slider">
 <?php 
    while($filas1=mysqli_fetch_array($consulta1)){
       echo '<img src="img/'.$filas1['imagen'].'"  onClick="enviarDatos(event)">'; 
    //Cuando hago click sobre cualquiera de las imágenes pongo en marcha la función
   //enviarDatos(). Énvío a su vez la ruta de la imagen sobre la que estoy pulsando
 }
?>
</div>


<script>
    function enviarDatos(event){
        //Recojo la ruta de la imagen
        var imagen=event.target.src;
        //hago un split para sacar el nombre de la imagen de la ruta 
        var imagen = imagen.split("/");
        imagen=imagen[imagen.length-1];

        $.ajax({
            data:{
                imagen:imagen, //envío a través de json el nombre de la imagen al archivo "listar.php", del cuál pretendo recibir el nombre de la imagen (de nuevo, ya que el objetivo es mostrar esta info en una ventana modal) y su ID
            },
            type:"GET",
            datatype:"json",
            url:"listar.php"
        })
        .done(function(datos,textStatus,jqXHR){
                respuesta1.innerHTML="<img src='img/"+datos.imagen+"'>";   //datos que recibo de "listar.php"
                respuesta2.innerHTML="ID:"+datos.id;
        })

    }
</script>


</div>
</div>
</body>
</html>

Archivo: "listar.php"

<?php
//Incluyo la conexion
include 'includes/conexion.php';

if ($conexion->connect_errno) {
 echo "Falló la conexión: %s\n", $conexion->connect_error); 
 exit(); }


//Recojo y guardo el nombre de la imagen que envío a través de AJAX
$imagen=$_GET['imagen'];

//Hago una consulta a mi bbdd para obtener el ID de esa imagen
$instruccion="SELECT * FROM producto WHERE nombre='".$imagen."'";
$consulta=mysqli_query($conexion, $instruccion);
$fila=mysqli_fetch_row($consulta);


//Guardo los datos en el array datosJson, para devolverlos
$datosJson['imagen']=$imagen; //Guardo nombre de la imagen
$datosJson['id']=$fila[0];    //Guardo ID de la imagen obtenido a través de la consulta

header('Content-type: application/json; charset=utf-8');
echo  json_encode($datosJson);
exit();
?>

Desde "pruebaJson.php" envío a través de Ajax (función enviarDatos(event)) el nombre de la imagen sobre la que estoy pulsando al archivo "listar.php". En listar.php, hago una consulta a mi bbdd para obtener el id de esa imagen y enviar esa información a "pruebaJson.php", dónde muestro el id y la imagen pulsada en una ventana modal.

11
  • No entiendo por qué incluyes la conexión ahí... ¿no deberías incluirla antes del código que pones al principio del todo, que es donde usas la conexión realmente? También puedes probar si la conexión se está creando bien mediante: if ($conexion->connect_errno) { printf("Falló la conexión: %s\n", $conexion->connect_error); exit(); } Esto es sólo para depurar. Si tu código espera una respuesta JSON, lo mejor sería ir controlando el código y al final dar una respuesta en ese formato siempre, sea con los datos erróneos, sea con los datos correctos.
    – A. Cedano
    Commented el 1 abr. 2018 a las 3:30
  • La conexión va en ambos sitios (son archivos distintos), sólo que en el primer código no la he mostrado. La conexión se está creando bien, he estado usando ese archivo de conexión (includes/conexion.php) en otros sitios y no me da ningún problema. Así que no sé, es un poco raro. Tienes razón en lo de ir controlando el código, pero no controlo mucho Json y Ajax aún, y la verdad que voy un poco a matacaballo.
    – Inca
    Commented el 1 abr. 2018 a las 14:01
  • No entiendo entonces cuál es el problema en sí. ¿Te da algún error? ¿Probaste lo que te dije: if ($conexion->connect_errno) { printf("Falló la conexión: %s\n", $conexion->connect_error); exit(); }. El hecho de que un código funcione en un sitio no implica que tenga que funcionar en otro. Puede haber un error de ruta en el archivo que incluyes, pueden ocurrir miles de eventualidades que no controlas. Uno de los peores errores en programación es presuponer que las cosas van a ir bien. Cuando programas tienes que ser pesimista, o sea, pensar que puede salir mal y controlar los errores.
    – A. Cedano
    Commented el 1 abr. 2018 a las 16:13
  • La ruta es correcta. He probado lo que me dijiste (He editado mi pregunta con el código, imagino que está bien usado) Al añadir ese código para comprobar si la conexión está bien ya hace algo. Pero lo que me devuelve es que imagen e id están indefinidas.
    – Inca
    Commented el 1 abr. 2018 a las 17:23
  • ¿Dónde te dice que están indefinidas, en PHP o en Javascript? ¿El archivo donde te dice que son indefinidas cómo se llama, listar.php?
    – A. Cedano
    Commented el 1 abr. 2018 a las 17:37

1 respuesta 1

0

En realidad no necesitas hacer otra petición al servidor, ni otra consulta a la base de datos.

¿Por qué no aprovechas la primera consulta y obtienes los datos que necesitas?

O sea, en pruebaJson.php tu consulta puede ser así:

$instruccion1="SELECT ID, imagen, nombre,  precio FROM producto";
 $consulta1=mysqli_query($conexion, $instruccion1);
 ?>
 <div class="slider-container">
    <div class="slider">
 <?php 
    while($filas1=mysqli_fetch_array($consulta1)){
       $img='<img src="img/'.$filas1['imagen'].'" title="'.$filas1['nombre'].'" id="'.$filas1["ID"].'" data-precio="'.$filas1["precio"].'" onClick="enviarDatos(event)">'; 
       echo $img;
    //Cuando hago click sobre cualquiera de las imágenes pongo en marcha la función
   //enviarDatos(). Énvío a su vez la ruta de la imagen sobre la que estoy pulsando
 }

Lo que se ha hecho ha sido agregar información al elemento img, siguiendo los mismos estándares de HTML: al elemento title, le agregamos el valor de la columna nombre; podemos usar el atributo id y agregar allí el valor de la columna ID, y para el precio, podemos recurrir atributos data. De ese modo, dispones de todo lo que necesitas in situ, y te ahorras otro viaje al servidor, lo cual tiene su precio, como podrás imaginar.

Luego en Javascript:

function enviarDatos(event){
    //Recojo la ruta de la imagen
    var imagen=event.target.src;
    var nombre=this.title; //si no funciona con this, usa la variable imagen creada en la línea anterior: imagen.title;
    var id=this.id;
    /*Para los datos guardados con data hay que usar dataset*/
    var precio=this.dataset.precio;

    /*Probablemente esto no sea necesario*/
    //hago un split para sacar el nombre de la imagen de la ruta 
    //var imagen = imagen.split("/");
    //imagen=imagen[imagen.length-1];

    respuesta2.innerHTML="ID:"+ id+ " precio: "+precio + "nombre: "+nombre;        

}
2
  • Ole ahí. Ahí está el tema. ¿Puedes creerte que no tenía ni idea de que podía usar atributos personalizados? ni siquiera sabía de su existencia. Por supuesto que ésta forma es mucho mas óptima, sencilla y hace uso de menos recursos. Muchísimas gracias por tu tiempo y paciencia A.Cedano.
    – Inca
    Commented el 1 abr. 2018 a las 19:08
  • Me alegro de que te haya servido @Inca. Aún cuando no existan atributos, a veces uno puede recurrir a trucos para guardar datos. Por ejemplo, en la etiqueta name="Titulo_50.20_1", puedes guardar tres datos, los cuales puedes recuperar con un split. Antes de que HTML fuera mejorado con atributos data yo recurría a trucos como esos, para evitar segundos viajes al servidor... parece que los de HTML se dieron cuenta :)... Por favor, cuando sea posible l◔_◔: ¿Qué debo hacer cuando alguien contesta mi pregunta? en el Centro de Ayuda.
    – A. Cedano
    Commented el 1 abr. 2018 a las 19:15

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.