Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Recibir datos a través de AJAX

Estas en el tema de Recibir datos a través de AJAX en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/04/2014, 11:02
 
Fecha de Ingreso: abril-2014
Mensajes: 32
Antigüedad: 7 años, 5 meses
Puntos: 0
Pregunta Recibir datos a través de AJAX

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);
}
  #2 (permalink)  
Antiguo 11/04/2014, 01:36
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 8 años
Puntos: 29
Respuesta: Recibir datos a través de AJAX

Podría ser con json:
Código Javascript:
Ver original
  1. function inicioEnvio() {
  2.         $(".lista-usuario").html('<img src="http://www.forosdelweb.com/f179/imagenes/1.jpg">');
  3.       }
  4.  
  5.       function llegadaDatos(datos) {
  6.         datos = $.parseJSON(datos);
  7.         $(".lista-artistas").html(datos.artistas);
  8.         $(".lista-canciones").html(datos.canciones);
  9.       }
  10.  
  11.       $(document).ready(function() {
  12.         $("#boton").click(function(e) {
  13.           e.preventDefault();
  14.           var problemas = 'fallo';
  15.           //var title = 'tit_1';
  16.           $.ajax({
  17.             async: true,
  18.             type: "POST",
  19.             dataType: "html",
  20.             contentType: "application/x-www-form-urlencoded",
  21.             url: "proc3.php",
  22.             //data: "titulo=" + title,
  23.             beforeSend: inicioEnvio,
  24.             success: llegadaDatos,
  25.             timeout: 4000,
  26.             error: problemas
  27.           });
  28.         });
  29.       });
Código HTML:
Ver original
  1. <style type="text/css">
  2.       div{border: solid 1px; margin: 2px;}
  3. <div class="lista-artistas">lista artistas</div>
  4.     <div class="lista-canciones">lista canciones
  5. </div>
  6. <button id="boton">Boton</button>
proc3.php
Código PHP:
Ver original
  1. $aArray = array(
  2.    'artistas' => "<li><a href='#'><span class='artista'>artista 1</span></a></li>"
  3.    . "<li><a href='#'><span class='artista'>artista 2</span></a></li>",
  4.    'canciones' => "<li><a href='#'><span class='artista'>cancion 1</span></a></li>"
  5.    . "<li><a href='#'><span class='artista'>cancion 2</span></a></li>"
  6. );
  7. echo json_encode($aArray);
  #3 (permalink)  
Antiguo 11/04/2014, 12:24
 
Fecha de Ingreso: abril-2014
Mensajes: 32
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Recibir datos a través de AJAX

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.
  #4 (permalink)  
Antiguo 11/04/2014, 13:10
Avatar de Djoaq  
Fecha de Ingreso: septiembre-2012
Ubicación: Barcelona
Mensajes: 271
Antigüedad: 9 años
Puntos: 38
Respuesta: Recibir datos a través de AJAX

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:
Ver original
  1. $respuesta = new stdClass();

creamos el objeto respuesta
creamos la conexión a la bd :
Código PHP:
Ver original
  1. $conexion = new mysqli("localhost","root","toorpedor","test",3306);
  2. mysqli_set_charset($conexion, "utf8");
despues creamos la consulta sql =
Código PHP:
Ver original
  1. $consulta1="SELECT COUNT(codigo). as lo quesea from tabla"

Código PHP:
Ver original
  1. $result = $conexion->query($consulta1);

Aquí viene el kit ...
Código PHP:
Ver original
  1. while ( $fila = $result->fetch_array()) {
  2. $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:
Ver original
  1. echo json_encode($respuesta);

Entonces en tu succes ajax recibes :
Código Javascript:
Ver original
  1. success: function(respuesta)
  2.                    { $("#datos").html(respuesta.datos1);
  3.                       $(".cancion").html(respuesta.datos2);}

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

Espero haberme explicado y haberte ayudado ! saludos!
  #5 (permalink)  
Antiguo 11/04/2014, 13:28
 
Fecha de Ingreso: abril-2014
Mensajes: 32
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Recibir datos a través de AJAX

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

Última edición por lightning2014; 11/04/2014 a las 13:34
  #6 (permalink)  
Antiguo 11/04/2014, 13:38
Avatar de Djoaq  
Fecha de Ingreso: septiembre-2012
Ubicación: Barcelona
Mensajes: 271
Antigüedad: 9 años
Puntos: 38
Respuesta: Recibir datos a través de AJAX

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:
Ver original
  1. $result1 = $conexion->query($consulta1);
  2. while ( $fila = $result1->fetch_array()) {
  3. $respuesta->datosdelaconsulta1 .='<li>'.utf8_encode($fila["consulta1"]).'</li>';
  4. }
Código PHP:
Ver original
  1. $result2 = $conexion->query($consulta2);
  2. while ( $fila = $result->fetch_array()) {
  3. $respuesta->datosdelaconsulta2 .='<li>'.utf8_encode($fila["consulta2"]).'</li>';
  4. }


Código PHP:
Ver original
  1. $result1 = $conexion->query($consulta1);
  2. while ( $fila = $result1->fetch_array()) {
  3. $respuesta->datosdelaconsulta3 .='<li>'.utf8_encode($fila["consulta3"]).'</li>';
  4. }


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:
Ver original
  1. $(".cualquierotro").html(respuesta.datosdelaconsulta1 );}
  2. $(".cancion").html(respuesta.datosdelaconsulta2 );}
  3. $(".grupo").html(respuesta.datosdelaconsulta3 );}

Espero te sirva! Saludos! :D

Última edición por Djoaq; 11/04/2014 a las 14:38 Razón: me equivoqué

Etiquetas: javascript, javascript+php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:34.