Duda sobre ajax y php

Citar

Escrito el 04 Abr 2014 08:44 pm

Tengo un pequeño detalle con lo que quiero hacer . El codigo de ejemplo trato es el siguiente:

Código HTML :

<div id="bloque_geners">
      <ul class="gnr">
            
         <li><a class="lnk" href="#" title="Bachata">Bachata</a></li>
         <li><a class="lnk" href="#" title="Baladas">Baladas</a></li>
         <li><a class="lnk" href="#" title="Boleros">Boleros</a></li>
         
      </ul class="gnr">
   </div>
   <div class="listaInstan">

      <h1>The Best Songs...</h1>
      <div class="ti_base">
         <span class="icons"></span>
         <span class="artista">Artista</span>
         <span class="tema">Tema</span>
         <span class="wopc">Duración</span>
         <span class="desc">Anuncio</span>
      </div>

      <ul class="lista-usuario lista_musica"> </ul>
   
</div>

Y el php :

Código PHP :

require 'connect.inc.php';

 $query="SELECT * FROM `musica` WHERE `id`!='1' order by rand()";

   if($query_run = mysql_query($query)){

      if(mysql_num_rows($query_run)==NULL){
         echo 'No se obtuvo ningun resultado';
            
      }else{ 
      echo"<li title='' aud='remix-prueba.mp3' name='../flash/' class='selecc'>
         <a data-tk='primerdaratk' rel='primerel' href='eminem'> 
         <i class='Ic IIa b_ordenar'></i> <i class='Ic IIb btn_play'></i> 
         <span class='artista'>Pollo Flaco</span> 
         <span class='tema'>New Remix 2014</span>
          <span class='duracion'>Anonima</span></a></li>";
         while($query_row = mysql_fetch_assoc($query_run)){
            $aud = $query_row['aud'];
            $datatk = $query_row['datatk'];
            $rel = $query_row['rel'];
            $name = "../".$query_row['name'];
            $artista = $query_row['artista'];
            $tema = $query_row['tema'];
            $duracion = $query_row['duracion'];
       echo"<li title='' aud='$aud' name='$name' class=''>
         <a data-tk='$datatk' rel='$rel' href='eminem'> 
         <i class='Ic IIa b_ordenar'></i> <i class='Ic IIb btn_play'></i> 
         <span class='artista'>$artista</span> 
         <span class='tema'>$tema</span> 
         <span class='duracion'>$duracion</span></a></li>";            
         }
      }      
   }else{
      echo mysql_error();
   }

Y lo que quiero hacer es que al hacer click en cada enlace (Bachata, Baladas, Bolero) se cargue una lista de registros de la base de datos en "<ul class="lista-usuario lista_musica">", sin recargar la pagina osea usando AJAX. Mi base de datos tiene 3 tablas para cada genero con el mismo nombre de genero. Con este codigo logre cargar esta lista de otra base de datos que tambien cree para probar que se llama "canciones" y la tabla "musicas".

De antemano Gracias.

Por lightning2014

0 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 29 Abr 2014 04:09 am

Saludos
para que puedas tener una pequeña idea de ajax, realiza lo siguiente, cambia tus <li> y reemplazalos por esto, al igual que coloca esta etiqueta: <div id="detalles"></div> debajo de los <li>

Código HTML :

<li><a id="enlace1" class="lnk" href="pagina1.php?cod=1" title="Bachata">Bachata</a></li>
<li><a id="enlace2" class="lnk" href="pagina1.php?cod=2" title="Baladas">Baladas</a></li>
<li><a id="enlace3" class="lnk" href="pagina1.php?cod=3" title="Boleros">Boleros</a></li>

y agrega dentro de la etiqueta <head> lo siguiente:

Código Javascript :

<script language="javascript" src="funciones.js" type="text/javascript"></script>

te envio el codigo funciones.js

Código Javascript :

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ob;
  for(f=1;f<=12;f++)
  {
    ob=document.getElementById('enlace'+f);
    addEvent(ob,'click',presionEnlace,false);
  }
}

function presionEnlace(e)
{
  if (window.event)
  {
    window.event.returnValue=false;
    var url=window.event.srcElement.getAttribute('href');
    cargarCanciones(url);     
  }
  else
    if (e)
    {
      e.preventDefault();
      var url=e.target.getAttribute('href');
      cargarCanciones(url);     
    }
}


var conexion1;
function cargarCanciones(url) 
{
  if(url=='')
  {
    return;
  }
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open("GET", url, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var detalles = document.getElementById("detalles");
  if(conexion1.readyState == 4)
  {
    detalles.innerHTML = conexion1.responseText;
  } 
  else 
  {
    detalles.innerHTML = 'Cargando...';
  }
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

y el archivo pagina1.php

Código PHP :

<?php
if ($_REQUEST['cod']==1)
  echo "listado de canciondes Bachata";
if ($_REQUEST['cod']==2)
  echo "listado de canciones Baladas";
if ($_REQUEST['cod']==3)
  echo "listado de canciones Boleros";
?>

esto ara que aparezca un texto distinto dentro de la etiqueta div al presionar un enlace, cualquier duda o comentario comunicarlo para poder ayudarte

Por mario22121985

88 de clabLevel

Envíale un mensaje privado

Duda sobre ajax y php

Escribe una respuesta rapida