Realizar consulta con ajax, json, php

Question

Un saludo amigos, actualmente estoy resolviendo un ejercicio en el cual quiero hacer una consulta sin necesidad de recargar la pagina, por tal motivo estoy usando ajax... Pero llevo ya varias horas y nada que doy con la solucion, e mirado algunos ejemplos que hay por internet pero ni asi e logrado resolverlo.

El problema es que el navegador no me da ningún error, si no que se queda colgado ejecutando la consulta y debo cerrar la pestaña para que vuelva a la normalidad.

Lo que quiero hacer es insertar un numero de cédula y al dar click en un boton compruebe si existe en mi base de datos, si existe me debe traer unos valores que se asignaran en varios cuadros de texto

Este es el código que tengo en el head de la pagina

<script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            // Asigno un evento a un botón de mi formulario

            $("[name='buscar_cli']").click(function(e){

                e.preventDefault();

                var datos_enviados = {
                    'buscar_cli' : $("[name='ced_cli']")
                }

                $.ajax({
                    type:'POST',
                    url: 'bd_comun.php',
                    data: datos_enviados,
                    datatype: 'json',
                })

                // Compruebo si me esta trayendo los valores

                .done(function(data){

                    console.log(data);
                    var datos2 = JSON.parse(data);
                    console.log(datos2);

                })

            })

        })

    </script>

Envio la cedula a un script php

if(isset($_POST['buscar_cli'])){

$persona = new usuario();
    $valor = $persona->buscarCliente($_POST['buscar_cli']);
}

Por ultimo envió los datos a otro script php para realizar la consulta

public function buscarCliente($ced){

    $buscar = "SELECT COUNT(*) FROM registro_clientes WHERE rc_cedu=:a";
    $resultado = $this->db_conexion->prepare($buscar);
    $resultado->execute(array(':a'=>$ced));

    $filas = $resultado->fetchColumn();

    if($filas>0){

        $extraer = "SELECT rc_cedu,rc_nomb,rc_aped,rc_telf,rc_dire FROM registro_clientes WHERE rc_cedu=:a";
        $resultado2 = $this->db_conexion->prepare($extraer);
        $resultado2->execute(array(':a'=>$ced));

        $data["datos"][] = $resultado2->fech(PDO::FETCH_ASSOC);

        echo json_encode($data);
        $resultado2->closeCursor();
    }else{
        echo 'Error';
    }

    $resultado->closeCursor();
    $this->db_conexion = null;
}

Eso es lo que tengo amigos, comento que mi experiencia con ajax es nula. Si me pueden echar una mano se los agradecería, ya he modificado varias veces el ejercicio pero no consigo hacerlo funcionar :(

Answer 1

Prueba de este modo. He aplicado algunas cosas dichas en comentario.

jQuery

• He usado código actualizado de jQuery (document.ready está obsoleto).
• He agregado el fail.

• Si respondes adecuadamente en el servidor no necesitas parsear el JSON luego.

  $(function() {
  
      // Asigno un evento a un botón de mi formulario
  
      $("[name='buscar_cli']").click(function(e){
  
          e.preventDefault();
  
          var datos_enviados = {
              'buscar_cli' : $("[name='ced_cli']")
          }
  
  
      var request = $.ajax({
        url: "bd_comun.php",
        method: "POST",
        data: datos_enviados,
        dataType: "json"
      });
  
  
      request.done(function( data ) {
          alert("Todo bien");
          console.log(data); //Si pones el content-type en PHP no necesitas parse         
      });
  
      request.fail(function( jqXHR, textStatus ) {
        alert( "Hubo un error: " + textStatus );
      });
  
  
      })
  
  });
  

---

PHP

• El código tiene algunos problemas. Entre ellos que no es coherente. Si Ajax espera un json, que fue lo que indicaste en el dataType, no es buena práctica hacer un simple echo si hay un error. Debes recoger en una variable el resultado del código e imprimirlo al final como json, pues eso es lo que Ajax espera.
• En PDO tienes que usar fetchAll y no fetch si quieres todos los resultados en un arreglo, de golpe. fetch es para ir iterando en un bucle. Ignora esto. El comentario de @aldanux me ha hecho ver que con fetch puedes en efecto almacenar una fila completa en un array de resultados. Si fuera más de una fila (y no son muchas filas), puedes entonces usar fetchAll.
• No le veo mucha lógica al uso de dos consultas, primero una para contar y luego otra para obtener los datos. Creo que se podría hacer con una sola, pero eso queda a opción tuya.

Espero te sirva.

public function buscarCliente($ced){

    $buscar = "SELECT COUNT(*) FROM registro_clientes WHERE rc_cedu=:a";
    $resultado = $this->db_conexion->prepare($buscar);
    $resultado->execute(array(':a'=>$ced));

    $filas = $resultado->fetchColumn();

    if($filas>0){

        $extraer = "SELECT rc_cedu,rc_nomb,rc_aped,rc_telf,rc_dire FROM registro_clientes WHERE rc_cedu=:a";
        $resultado2 = $this->db_conexion->prepare($extraer);
        $resultado2->execute(array(':a'=>$ced));

        $arrResultado["datos"][] = $resultado2->fetch(PDO::FETCH_ASSOC);

        $resultado2->closeCursor();
    }else{
        $arrResultado=array("error"=>"No se encontraron datos");
    }

    $resultado->closeCursor();
    $this->db_conexion = null;

        header('Content-Type: application/json');
        echo json_encode($arrResultado);

 }