AJAX - Error al convertir una consulta en un objeto tipo JSON

 
Vista:
Imágen de perfil de Fabian
Val: 2
Ha aumentado 1 puesto en AJAX (en relación al último mes)
Gráfica de AJAX

Error al convertir una consulta en un objeto tipo JSON

Publicado por Fabian (1 intervención) el 24/08/2020 17:44:20
Un saludo a la comunidad, quisiera me ayudaran a resolver este error que tengo al usar AJAX.
Tengo un formulario de búsqueda en el cual cada vez que tecleo una letra, se hace una petición ajax a un controlador y este mediante una clase envía la consulta a la base de datos, devolviendo un array que se convierte en tipo JSON String, el cual javascript lo recibe, pero al intentar convertirlo con JSON.parse me sale un error diferente tanto en mozilla como en Chrome.
error-formulario

1. A través de este formulario digito el nombre a buscar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form class="mx-auto text-light mt-3 px-4 d-none buscar contenedor-formulario" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);  ?>" method="POST" name="buscar">
    <div class="form-row font-weight-bold ocultar2 py-2">
      <div class="col-6 col-md-4">
        <h4 class="text-center mr-2 text-light mt-3">Actualizar Cliente</h4>
      </div>
      <div class="input-group mt-2 col-6 col-md-8">
        <div class="">
            <select name="nombre" class="" style="height: 50px; width: 50px;"></select>
        </div>
        <input type="search" id="buscar" class="form-control lead mr-1" placeholder="Digite el nombre del Cliente o Empresa a Actualizar" name="buscar" style="height: 50px" required><i class="btn submit-btn fas fa-search fa-2x input-group-text btnBuscar" onclick="buscar.submit()"></i>
        <button type="button" class="btn btn-light btn-sm ml-2 ocultarBuscar" onclick="location.href='index.php'"><i class="fas fa-times fa-2x"></i>
        </button>
      </div>
    </div>
    <div class="form-group col-2 ml-1 bg-success">
        <input type="hidden" name="buscar" value="buscar" readonly class="form-control bg-light">
    </div>
</form>

2. Javascrip recibe datos cada vez que se teclea una letra y envía la petición a contenido.php el cual es el controlador.

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#buscar').keyup(function(e){
     let buscar = $('#buscar').val();
     $.ajax(
    {
        url: 'contenido.php',
        type: 'POST',
        data: {buscar},
        success: function(e){
            var task =JSON.parse(e);
            console.log(task);
        }
    })
})

3. el controlador recibe el dato y lo envía como parámetro a una clase llamada ShowClientByName().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$buscar = $_POST['buscar'];
if (!empty($buscar) AND isset($_POST['buscar'])){
      $clienteName = filter_var(mb_strtolower($_POST['buscar']), FILTER_SANITIZE_STRING);
      $clienteByName = new Clientes();
      $resultClient = $clienteByName->showClientByName($clienteName);
 
      if ($resultClient != false) {
        $nombres = $resultClient;
        echo $nombres;
      }else
      {
        $errores.='<li class="advertencias text-center bg-danger text-light lead">¡El Cliente con este nombre no existe!</li>';
      }
}
4. La clase procesa la consulta tipo búsqueda LIKE con el parámetro recibido y devuelve un array, este array es convertido finalmente en un string, mediante la función json_encode.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public function showClientByName(string $buscar)
{
    $consulta = $this->bd->prepare("
    SELECT * FROM clientes WHERE nombre LIKE '%".$buscar."%' OR empresa LIKE '%".$buscar."%'");
    $resultado = $consulta->execute();
    $datosCliente = $consulta->fetchAll();
    $datos = array();
    if ($resultado != false) {
        foreach ($datosCliente as $key => $value) {
            array_push($datos, array('nombre' => $value['nombre']));
        }
    }else{
        $datos = $resultado;
    }
    $datosStr = json_encode($datos);
    return $datosStr;
}

5. Si la consulta ha sido exitosa el controlador imprime mediante un echo el array en string devuelto por la clase.

1
2
3
4
5
6
7
8
9
$clienteByName = new Clientes();
$resultClient = $clienteByName->showClientByName($clienteName);
if ($resultClient != false) {
    $nombres = $resultClient;
    echo $nombres;
}else
{
    $errores.='<li class="advertencias text-center bg-danger text-light lead">¡El Cliente con este nombre no existe!</li>';
}

6. Antes de convertir la respuesta de la petición a un objeto json, comentamos el JSON.Parse para ver en consola el resultado de la petición.
1
2
3
4
5
6
7
8
9
10
11
12
13
$('#buscar').keyup(function(e){
     let buscar = $('#buscar').val();
     $.ajax(
    {
        url: 'contenido.php',
        type: 'POST',
        data: {buscar},
        success: function(e){
            //var task =JSON.parse(e);
            console.log(e);
        }
    })
})
7. El resultado mostrado en consola es el siguiente:

error-1
La primera presunta es ¿porque con el string (ARRAY) de respuesta a la petición, se genera un código html continuo a la respuesta? ¿no debería mostrar solo el array(convertido a string) devuelto?

8. El ERROR: al convertir este string(Array) en un objeto mediante JSON.Parse se genera un error diferente en cada navegador:
1
2
3
4
5
6
7
8
9
10
11
12
13
$('#buscar').keyup(function(e){
     let buscar = $('#buscar').val();
     $.ajax(
    {
        url: 'contenido.php',
        type: 'POST',
        data: {buscar},
        success: function(e){
            var task =JSON.parse(e);
            console.log(task);
        }
    })
})
Error en Chrome:

error-en-crhome

Error en Mozilla

error-2

Muchas gracias a quien pueda ayudarme con la solución a este problema.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder