Tema: Problemas al cargar datos con Ajax
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/02/2015, 03:27
dglypho
 
Fecha de Ingreso: noviembre-2014
Mensajes: 27
Antigüedad: 9 años, 6 meses
Puntos: 0
Problemas al cargar datos con Ajax
Hola, tengo que realizar un ejercicio de clase en el que al seleccionar un curso dentro de una etiqueta datalist, me muestre los alumnos que están matriculados en ese curso. A la hora de cargar los cursos se cargan todos los cursos que se encuentran dentro de la base de datos. Pero al seleccionar un curso y recargarse el datalist de alumnos, este último datalist se rellena con un valor "undefined". El código completo de este ejercicio es el siguiente:

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>TODO supply a title</title>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <script type="text/javascript" src="ajax.js"></script>
  7.     </head>
  8.     <body onload="load()">
  9.         Curso:
  10.         <div id="curso"></div><br><br>
  11.         Alumno: 
  12.         <div id="alumno"></div><br><br>
  13.     </body>
  14. </html>

Código Javascript: 
Ver original
  1. var objAjax;
  2. function creaAjax(){
  3.     if (window.XMLHttpRequest) {
  4.         objetoAjax=new XMLHttpRequest();
  5.     }
  6.     else{
  7.         objetoAjax=new ActiveXObject("Microsoft.XMLHTTP");
  8.     }
  9.     return objetoAjax;
  10. }
  11.  
  12. function load(){
  13.     objAjax=creaAjax();
  14.     objAjax.open('GET','cargaCurso.php',true);
  15.     objAjax.send();
  16.     objAjax.onreadystatechange=respuestaLoad;
  17. }
  18.  
  19. function respuestaLoad(){
  20.     if(objAjax.readyState==4 && objAjax.status==200){
  21.         alert("responseText:"+objAjax.responseText);
  22.         var miArray=objAjax.responseText;
  23.         mostrarCursos(miArray);
  24.     }
  25. }
  26.  
  27. function mostrarCursos(miArray){
  28.     var array_datos=JSON.parse(miArray);
  29.     var curso=document.getElementById("curso");
  30.     curso.innerHTML="";
  31.     var inputCurso=document.createElement("input");
  32.     inputCurso.setAttribute("list","listaCursos");
  33.     var datalist=document.createElement("datalist");
  34.     datalist.setAttribute("id","listaCursos");
  35.     for(var i in array_datos){
  36.         var opcion=document.createElement("option");
  37.         opcion.setAttribute("value",array_datos[i].COD_GRUPO);
  38.         datalist.appendChild(opcion);
  39.     }
  40.     inputCurso.addEventListener('change',cargarAlumno,true);
  41.     inputCurso.appendChild(datalist);
  42.     curso.appendChild(inputCurso);
  43. }
  44.  
  45. function cargarAlumno(){
  46.     var curso=document.getElementById("listaCursos").value;
  47.     alert(curso);
  48.     objAjax.open('GET','cargarAlumnos.php?CURSO='+curso,true);
  49.     objAjax.send();
  50.     objAjax.onreadystatechange=respuestaCargaAlumno;
  51. }
  52.  
  53. function respuestaCargaAlumno(){
  54.     if(objAjax.readyState==4 && objAjax.status==200){
  55.         alert("responseText:"+objAjax.responseText);
  56.         var miArray=objAjax.responseText;
  57.         mostrarAlumnos(miArray);
  58.     }
  59. }
  60.  
  61. function mostrarAlumnos(miArray){
  62.     var array_datos=JSON.parse(miArray);
  63.     var alumno=document.getElementById("alumno");
  64.     alumno.innerHTML="";
  65.     var inputAlumno=document.createElement("input");
  66.     inputAlumno.setAttribute("list","listaAlumnos");
  67.     var datalist=document.createElement("datalist");
  68.     datalist.setAttribute("id","listaAlumnos");
  69.     for(var i in array_datos){
  70.         var opcion=document.createElement("option");
  71.         opcion.innerHTML=array_datos[i].NOM_ALUM;
  72.         opcion.setAttribute("value",array_datos[i].NOM_ALUM);
  73.         datalist.appendChild(opcion);
  74.     }
  75.     inputAlumno.appendChild(datalist);
  76.     alumno.appendChild(inputAlumno);
  77. }

Código PHP: 
Ver original
  1. $conexion=  mysqli_connect("localhost", "root", "root");
  2. mysqli_select_db($conexion, "centroCursos");
  3. $sql=mysqli_query($conexion,"select * from grupo");
  4. $miArray=array();
  5. while($row=  mysqli_fetch_assoc($sql)){
  6.     $miArray[]=$row;
  7. }
  8. echo json_encode($miArray);


Código PHP: 
Ver original
  1. $curso=$_REQUEST['CURSO'];
  2. $conexion=  mysqli_connect("localhost", "root", "root");
  3. mysqli_select_db($conexion, "centroCursos");
  4. $sql=mysqli_query($conexion,"select NOM_ALUM from alumnos WHERE GRUPO=".$curso."");
  5. echo json_encode($curso);

No me sale ningún error en el JavaScript ni en el PHP sin embargo no me muestra los alumnos que están matriculados en el curso que he seleccionado. Que error puedo tener y que posible solución puedo aplicar.

Muchas gracias por la ayuda.