Mi peticion ajax no regresa datos

Question

Estoy intentado hacer un select anidado con php, ajax y mysql en un disño MVC.

En el siguiente select muestro los datos (Nombre de cursos) que tengo en mi base de datos, estos se muestran sin problema.

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="curso">Nombre del curso</label>
                            <select id="curso" class="form-control" name="curso">
                                <option selected="selected">Selecionar curso</option>
                                <?php foreach ($data['asignar'] as $cur) {?>
                                <option value="<?php echo $cur["nombreDelCurso"]; ?>">
                                    <?php echo $cur['nombreDelCurso']; ?>
                                </option>
                                <?php }?>
                            </select>
                        </div>
                    </div>

Y al seleccionar el nombre del curso me deberia mostrar el nombre del instructor en este campo.

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="instructor">Nombre del instructor</label>
                            <select id="instructor" class="form-control" name="instructor">
                                <option id="nombreInstructor"></option>
                            </select>
                        </div>
                    </div>

Mi peticion AJAX

$(document).ready(function() {
$("#curso").change(function() {
    var id = $(this).find(":selected").val();
    var dataString = 'asistencia=' + id;
    console.log(dataString);
    $.ajax({
        url : '../../tec/Config/cursos.php',
        dataType: "json",
        data: dataString,
        cache: false,
        success: function(employeeData) {
            console.log(employeeData);
            if (employeeData) {
                $("#heading").show();
                $("#no_records").hide();
                $("#nombreInstructor").text(employeeData.nombreDelInstructor);
                $("#records").show();
            } else {
                $("#heading").hide();
                $("#records").hide();
                $("#no_records").show();
            }
        }
    });
})
});

Mi nueva conexion

require 'Config.php';

if ($_REQUEST['asistencia']) {
    echo 'alert("no hay anad")';
    $data = new Conexion();
    $conexion = $data->conect();
    $strquery = "SELECT * FROM cursos WHERE nombreDelCurso='" . $_REQUEST['asistencia'] . "'";
    $result = $conexion->prepare($strquery);
    $result->execute();
    $data = $result->fetchall(PDO::FETCH_ASSOC);

    echo json_encode ($data);
} else {
   echo 0;
}

Como se muestra en la siguiente imagen en el campo instructor no muestra nada

Answer 1

Veo varios problemas en tu código, y los voy a enumerar:

• Usas funciones de jQuery obsoletas
• Usas código vulnerable (inyección SQL)
• Convendría que uses un método más específico, con GET bastaría para este caso
• Tu estilo de responder en el servidor no es coherente con lo que el cliente espera. Indicas un dataType: 'json' en el cliente y en el servidor respondes no importa qué. Debes controlar el flujo del código en el servidor para responder siempre un json, pase lo que pase, controlando además TODOS los posibles errores. No deberías nunca programar de una forma ingenua, como de hecho haces.

Aplicaremos ahora todo lo dicho en tu código:

En el cliente

/*
   $(document).ready(function() {
   en OBSOLETO desde jQuery 3
*/

$(function() {
    $("#curso").change(function() {
        var id = $(this).find(":selected").val();
        var mData = {asistencia: id};

        $.ajax({
            url : '../../tec/Config/cursos.php',
            dataType: "json",
            data: mData,
            method: 'GET',
            cache: false,
            success: function(employeeData) {
                console.log(employeeData);
                if (employeeData.status) {
                    /*
                       Puede que la forma de lectura
                       deba variar, según la estructura
                       de la respuesta
                     */
                    console.log(employeeData.data);
                    $("#heading").show();
                    $("#no_records").hide();
                    $("#nombreInstructor").text(employeeData.nombreDelInstructor);
                    $("#records").show();
                } else {
                    $("#heading").hide();
                    $("#records").hide();
                    $("#no_records").show();
                }
            }
        });
    })
});

---

En el Servidor

/*
   Si tu versión de PHP es anterior a la v. 7
   cambia la siguiente línea por esto:
   $curso=!empty($_GET['asistencia']) ? $_GET['asistencia'] : null;
*/
$curso=$_GET['asistencia'] ?? null;
/*
   Variable para seguir el flujo del programa
*/
$mData=array();

if ($curso) {
    require 'Config.php';
    $data = new Conexion();
    $conexion = $data->conect();
    if ($conexion) {
        $sql = "SELECT * FROM cursos WHERE nombreDelCurso=:curso";
        $result = $conexion->prepare($sql);
        $result->bindParam(':curso', $curso, PDO::PARAM_STR);
        $result->execute();
        $data = $result->fetchAll(PDO::FETCH_ASSOC);
        if ($data) {
            $mData['status']=true;
            $mData['data']=$data;
        } else {
            $mData['status']=false;
            $mData['msg']='No se encontraron datos';
        }
    } else {
        $mData['status']=false;
        $mData['msg']='No hay conexión';
    }
} else {
    $mData['status']=false;
    $mData['msg']='No se enviaron datos desde el cliente';
}
echo json_encode ($mData);

Si observas, en el servidor he diseñado una estrategia que consiste en lo siguiente:

• Si algún error ocurre, pondré en $mData una clave status con valor false y pondré también una clave msg con un mensaje descriptivo del error.
• Si ningún error ocurre, pondré en $mDatauna clave status con valor true y pondré también una clave data con los datos.

Si observas, el código del cliente también es conforme con este estilo. Basta con esto: if (employeeData.status) { para saber que hay datos, y luego usarás employeeData.data para obtener los datos.

OJO: puede que fetchAll te devuelva varias filas o una sola fila, metida en un índice 0 de un array. Sea como sea, tu lectura en el cliente debe ser conforme a la estructura de la respuesta. Dado que esto es algo contextual, no he modificado nada en el cliente al respecto, simplemente te puse allí un console.log con la forma correcta de depurar. Adapta la lectura según la realidad de tus datos.