[SOLUCIONADO] Recibir datos a través de AJAX

[lightning2014]

Como puedo hacer para recibir datos de la consulta con ajax en diferentes divs?

Tengo la linea de codigo en PHP que primero consulta a la DB e imprime lo siguiente:

Código PHP:

  echo"<li><a href='#'><span class='artista'>$songs</span></a></li>";
//Esto es posible cuando lo hago en un solo div 
   

Esta es la otra linea que quiero imprimir en otro div

Código PHP:

  echo"<li><a href='#'><span class='artista'>$artitas</span></a></li>"; 
   

El modelo que uso con el ajax es:

Código:

$.ajax({

           async:true,
           type: "POST",
           dataType: "html",
           contentType: "application/x-www-form-urlencoded",
           url:"recibe.php", 
           data:"titulo="+title,
           beforeSend:inicioEnvio, 
           success:llegadaDatos,
           timeout:4000,
           error:problemas
         }); 
function inicioEnvio(){
$(".lista-usuario").html('<img src="loading.gif">');
}

function llegadaDatos(datos){
  $(".lista-usuario").html(datos);
}

[bathorz]

Podría ser con json:

Código Javascript:

function inicioEnvio() {
        $(".lista-usuario").html('<img src="http://www.forosdelweb.com/f179/imagenes/1.jpg">');
      }
 
      function llegadaDatos(datos) {
        datos = $.parseJSON(datos);
        $(".lista-artistas").html(datos.artistas);
        $(".lista-canciones").html(datos.canciones);
      }
 
      $(document).ready(function() {
        $("#boton").click(function(e) {
          e.preventDefault();
          var problemas = 'fallo';
          //var title = 'tit_1';
          $.ajax({
            async: true,
            type: "POST",
            dataType: "html",
            contentType: "application/x-www-form-urlencoded",
            url: "proc3.php",
            //data: "titulo=" + title,
            beforeSend: inicioEnvio,
            success: llegadaDatos,
            timeout: 4000,
            error: problemas
          });
        });
      });
 

Código HTML:

<style type="text/css">
      div{border: solid 1px; margin: 2px;}
</style>
<div class="lista-artistas">lista artistas</div>
    <div class="lista-canciones">lista canciones
</div>
<button id="boton">Boton</button>
 

proc3.php

Código PHP:

$aArray = array(
   'artistas' => "<li><a href='#'><span class='artista'>artista 1</span></a></li>"
   . "<li><a href='#'><span class='artista'>artista 2</span></a></li>",
   'canciones' => "<li><a href='#'><span class='artista'>cancion 1</span></a></li>"
   . "<li><a href='#'><span class='artista'>cancion 2</span></a></li>"
);
echo json_encode($aArray);
 

[lightning2014]

Gracias por la respuesta .
Pero tengo un problema al usar json.
No entiendo como has pasado a las variables del PHP que son "$artistas" y "$songs" a claves para el array , en el ejemplo:

Código PHP:

  $aArray = array(
   'artistas' => "<li><a href='#'><span class='artista'>artista 1</span></a></li>"
   . "<li><a href='#'><span class='artista'>artista 2</span></a></li>",
//aqui lo tomas como clave a "artistas" para que imprima en el html el valor que le das.
   'canciones' => "<li><a href='#'><span class='artista'>cancion 1</span></a></li>"
   . "<li><a href='#'><span class='artista'>cancion 2</span></a></li>"
//aqui lo tomas como clave a "canciones".
);
echo json_encode($aArray); 
   

Pero en mi caso hago 3 consultas a la base de datos y luego con el echo imprimo las etiquetas html + la variable.Porfavor si hay alguna manera de pasar la variable del php como elemento en el array seria genial o como hago para poder llamar a esa variable en el array y asi pasar los datos al ajax para que los imprima en cada "div" que yo le asigne.
De antemano gracias.

[Djoaq]

No soy un experto .. y curiosamente creo que he encontrado lo que buscaba...

timeout:4000, ahora me lo estudio ..

El caso es que yo tengo hecho algo parecido , la idea es que en un mismo archivo php puedas lanzar todas las consultas que necesites y luego traértelas por ajax.

lo que creo es una stdclass ..

Código PHP:

$respuesta = new stdClass();
 

creamos el objeto respuesta
creamos la conexión a la bd :

Código PHP:

$conexion = new mysqli("localhost","root","toorpedor","test",3306);
mysqli_set_charset($conexion, "utf8");
 

despues creamos la consulta sql =

Código PHP:

$consulta1="SELECT COUNT(codigo). as lo quesea from tabla"
 

Código PHP:

$result = $conexion->query($consulta1);
 

Aquí viene el kit ...

Código PHP:

while ( $fila = $result->fetch_array()) {
$respuesta->datos .='<li>'.utf8_encode($fila["nombre1"]).'</li>';}
 

ahora tienes un objeto respuesta->datos con el resultado de la consulta1 ...

así puedes crear tantas consultas respuesta->datos1 , respuesta->datos2 como necesites

y al final preparas y envias por ajax el objeto respuesta con TODOS sus datos :

Código PHP:

echo json_encode($respuesta);
 

Entonces en tu succes ajax recibes :

Código Javascript:

success: function(respuesta)
                   { $("#datos").html(respuesta.datos1);
                      $(".cancion").html(respuesta.datos2);}
 

Y muy importante cambia el datatype por : dataType: "json".

Espero haberme explicado y haberte ayudado ! saludos!

[lightning2014]

Si, es de mucha ayuda tu respuesta. Pero en la sentencia "echo json_encode($respuesta);" puedo meter a mas de una variable ?, es decir con "$respuesta" solo obtengo el dato que quiero imprimir en un cierto div de una consulta y si en en el mismo php hago otra consulta para otro dato que voy a imprimir en otro div ? .Como haria?

Gracias

[Djoaq]

en echo json_encode($respuesta);

estas imprimiendo un objeto padre donde estas metiendo todos los objetos hijos que vas creando con tantas consultas a la bd necesites ...

es decir tu puedes tener todas las consultas que necesites :

Código PHP:

  $consulta1="SELECT COUNT(codigo) as lo quesea from tabla" 
   

Código PHP:

  $consulta2="SELECT * ,lo quesea from tabla2" 
   

Código PHP:

  $consulta3="SELECT COUNT(codigo) as lo quesea from tabla" 
   

y puedes crear tantos objetos $respuesta->datosdelaconsulta por consultas quieras :

Código PHP:

$result1 = $conexion->query($consulta1);
while ( $fila = $result1->fetch_array()) {
$respuesta->datosdelaconsulta1 .='<li>'.utf8_encode($fila["consulta1"]).'</li>';
}
 

Código PHP:

$result2 = $conexion->query($consulta2);
while ( $fila = $result->fetch_array()) {
$respuesta->datosdelaconsulta2 .='<li>'.utf8_encode($fila["consulta2"]).'</li>';
}
 

Código PHP:

$result1 = $conexion->query($consulta1);
while ( $fila = $result1->fetch_array()) {
$respuesta->datosdelaconsulta3 .='<li>'.utf8_encode($fila["consulta3"]).'</li>';
}
 

el kit esque tu por ajax envías el objeto padre $respuesta con todos sus objetos hijos $respuesta->datosdelaconsultaN dentro

y luego los recuperas en el success accediendo al objeto hijo que quieras:

Código Javascript:

$(".cualquierotro").html(respuesta.datosdelaconsulta1 );}
$(".cancion").html(respuesta.datosdelaconsulta2 );}
$(".grupo").html(respuesta.datosdelaconsulta3 );}
 

Espero te sirva! Saludos! :D