3

Estoy tratando de convertir un ejemplo que me pasaron, para rellenar unos inputs, pero me ha costado trabajo, se que debe ser algo fácil pero apenas comienzo en la programación.

Lo que hago es que al momento de que lleno un input con id nombre, este manda el nombre a un archivo js y este lo manda a un archivo php donde genero la consulta, posteriormente imprimo el teléfono y la dirección en sus respectivos campos con id.

Hasta el momento sólo llevo una baba

    <?php


require 'config/Conexion.php';

if(empty($_POST['nombre'])){ 

$nombre = $_POST['nombre']; 

  $res = mysql_query("select * from usuarios where nombre='"$nombre"'") or die(mysql_error());
   while($row = mysql_fetch_array($res)){
    if (condition) {
      # code...
    }
   }
 }

y este es el ejemplo que me proporcionaron

if(!empty($_POST['nombre'])){

       $nombre = $_POST['nombre'];

       if($nombre=='juan'){
          $return = array('telefono'=>'611611611','direccion'=>'Una calle que no existe, Madrid');
       } elseif($nombre=='maria') {
          $return = array('telefono'=>'666666666','direccion'=>'call del diablo, Pais de las maravillas');
       } else {
          $return = array('error'=>'El nombre no esta guardado en la base de datos');
       }

       die(json_encode($return));
    }
    ?>

HTML

<!doctype html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <title>POC Ajax Cliente</title>

</head>
<body>
   <div id="cliente">
      <form action="" method="POST">
         <label for="nombre">Nombre</label>
         <input type="text" id="nombre" name="nombre" value="" placeholder="Nombre.." />
         <br />
         <label for="direccion">Dirección</label>
         <input type="text" id="direccion" name="direccion" value="" placeholder="Dirección.." />
         <br />
         <label for="telefono">Teléfono</label>
         <input type="text" id="telefono" name="telefono" value="" placeholder="Teléfono..." />
      </form>
   </div>
   <div id="estado">Esperando input.</div>
   <!-- Scripts -->
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
   <script type="text/javascript" src="cliente.js"></script>
</body>
</html>

JS

$(function(){
   /* Ponemos evento blur a la escucha sobre id nombre en id cliente. */
   $('#cliente').on('blur','#nombre',function(){
      /* Obtenemos el valor del campo */
      var valor = this.value;
      /* Si la longitud del valor es mayor a 2 caracteres.. */
      if(valor.length>=3){

         /* Cambiamos el estado.. */
         $('#estado').html('Cargando datos de servidor...');

         /* Hacemos la consulta ajax */
         var consulta = $.ajax({
            type:'POST',
            url:'cliente.php',
            data:{nombre:valor},
            dataType:'JSON'
         });

         /* En caso de que se haya retornado bien.. */
         consulta.done(function(data){
            if(data.error!==undefined){
               $('#estado').html('Ha ocurrido un error: '+data.error);
               return false;
            } else {
               if(data.telefono!==undefined){$('#cliente #telefono').val(data.telefono);}
               if(data.direccion!==undefined){$('#cliente #direccion').val(data.direccion);}
               $('#estado').html('Datos cargados..');
               return true;
            }
         });

         /* Si la consulta ha fallado.. */
         consulta.fail(function(){
            $('#estado').html('Ha habido un error contactando el servidor.');
            return false;
         });

      } else {
         /* Mostrar error */
         $('#estado').html('El nombre tener una longitud mayor a 2 caracteres...');
         return false;
      }
   });
});

NUEVO CODIGO

Este es el codigo que he tratado de realizar para que me traiga los datos, pero no lo he conseguido

<?php

require 'config/Conexion.php';

if(!empty($_POST['nombre'])){

$nombre = $_POST['nombre'];

$sql = "SELECT * FROM usuarios WHERE nombre = '.$nombre.'";  
$stmt = $pdo->prepare($sql);
$stmt ->execute();
$arrDatos = $stmt->fetchAll(PDO::FETCH_ASSOC);


  if($arrDatos){
    foreach ($arrDatos as $row) {
      $return = array ('telefono' => $row['telefono'], 'direccion' => $row['direccion']);
    }
  } else {
    $return = array('error'=>'El nombre no esta guardado en la base de datos');
  }
  die(json_encode($return));
}

de aqui es de donde he conseguido el ejemplo ejemplo

Por favor, espero alguien me pueda ayudar, solo quisiera saber cómo hacer la counsulta e imprimir los datos.

GRACIAS a todos por su ayuda, he logrado conseguir lo que queria con la gran ayuda de @A.Cedano :)

8
  • Si lo que quieres es llenar inputs de un formulario desde los resultados de una consulta, lo primero que te recomendaría es que no uses la extensión mysql_* ya que la misma está descontinuada debido a que pone en riesgo los datos (ver esta pregunta). Puedes usar mejor PDO. Es más seguro y facilita las cosas. Por ejemplo, puedes obtener un arreglo con los resultados y llenar cada valor de un formulario de una forma transparente. Aquí te dejo un ejemplo de uso de PDO.
    – A. Cedano
    el 28 jul. 2017 a las 6:08
  • @Acedeno he visto tu ejemplo y me parece muy bueno, me podrias orientar a cómo pasar mi variable en el primer ejemplo de Select del link que me proporcionaste? Ya que en el bindValue haces algo que no entiendo muy bien
    – cesg.dav
    el 28 jul. 2017 a las 6:23
  • Lo que ocurre en el primer SELECT es algo fundamental. Se pasa aparte el valor obtenido desde fuera, en este caso, el que se usará como criterio en el WHERE de la consulta. ¿Qué utilidad tiene eso? Prevenir contra la Inyección SQL, es decir, que te inyecten código malicioso en tu consulta. Ese es el principal motivo por el que la extensión que usas fue declarada obsoleta. Entonces, tú puedes recuperar en una variable el valor por el que quieres filtrar en el WHERE y pasarlo de forma segura con bindValue. Luego recuperas los resultados en un array y los devuelves en respuesta a la petición.
    – A. Cedano
    el 28 jul. 2017 a las 6:43
  • Si te interesa, mañana puedo prepararte una respuesta con más detalle. Si estás empezando, creo que una buena opción sería que aprendas a usar PDO. Te evitará muchos dolores de cabeza y cuando tienes una clase configurada para manejar la conexión y las consultas, todo se hace aún más fácil.
    – A. Cedano
    el 28 jul. 2017 a las 6:45
  • @A.Cedano por supesto que me gustaria que me ayudaras
    – cesg.dav
    el 28 jul. 2017 a las 15:41

3 respuestas 3

1

Aquí vengo con mi respuesta.

Para resolver problemas como el tuyo, dos escenarios son posibles.

En el primero, los datos se obtendrían y presentarían en un mismo archivo sin tener que hacer peticiones en background al servidor. Sería el caso por ejemplo de una página en la que presentas varios datos al mismo tiempo.

En el segundo, teniendo datos precargados en la página, al seleccionar uno de ellos lanzarías una consulta en background para obtener por ejemplo todos los detalles de ese dato seleccionado. En ese segundo escenario puedes valerte de Javascript puro, o de librerías como jQuery, para hacer las peticiones al servidor. Luego debes obtener la respuesta del servidor y presentar los datos. En el segundo escenario tendrías en realidad un archivo php que funcionaría casi como el del primer escenario, sólo que aquí el archivo respondería con un objeto JSON.

El ejemplo de tu código tiene, con todo respeto, un aspecto bastante arcaico, no sólo por la extensión que usa para manejar los datos (mysql_*), la cual ha sido declarada obsoleta. Además en el ejemplo, obtienes, según el nombre, unos datos predeterminados guardados en PHP. En una aplicación real, todos los datos se encontrarían en la base de datos. Accedes a esos datos mediante una consulta y luego los presentas en pantalla. Es decir, los datos como tales no existen en variables de PHP, sino en bases de datos. De esa forma, una aplicación puede manejar millones de datos. ¡Imagina que tengas que tenerlos guardados en variables!

Ahora bien, cuando trabajas con bases de datos necesitas lo siguiente:

  1. Conectar a la base de datos de forma segura.

Para no estar creando conexiones por todas partes, es recomendable tener una clase dedicada a la conexión. La cual puedes usar cada vez que necesites conectar a la base de datos.

Debido a los problemas de la Inyección SQL, se recomienda usar PDO o MySQLi. Yo particularmente prefiero PDO, por ser más robusto y fácil de usar. Aquí tienes una clase que he creado, la puedes usar en tus proyectos si lo deseas. El readme explica más o menos como funciona. Es la clase que uso en mis proyectos y funciona muy bien.

  1. Consultar la base de datos de forma segura

Usar PDO o MySQLi no te libra de la Inyección SQL si no los usas como es debido. En toda consulta en la que intervengan datos desde el exterior debes usar consultas preparadas. Lo cual consiste en pasar la consulta por una parte, escribiéndola usando marcadores de nombre o de posición y pasar los datos por otra. En resumen, no pasar junta la consulta y los datos. (Eso es lo que ocurre con el bindValue que no entendías en el enlace que te proporcioné.

En el código se muestra cómo funciona el manejo de consultas preparadas usando PDO.

Primer escenario: Obtener los datos en la misma página

Veamos un ejemplo de consulta usando PDO y consultas preparadas. Lo que hace el ejemplo es obtener los primeros cinco libros de la tabla libros consultado a la base de datos, lee esos resultados y los muestra en un formulario. Los datos se pueden mostrar también en una tabla, en texto plano o donde quieras.

Hay varios comentarios en el código para una mejor comprensión.

Ver Demo del Código

<?php

    /**
     * Prueba llenar formulario desde  BD
     * 
    */

    require "util/public_db_info.php";
    $pdo = new PDO($dsn, $user_name, $pass_word);

    /**
      * Este es un ejemplo de consulta preparada:
      * SELECT * FROM books WHERE id<=:id ORDER BY id
      * en ella :id es un marcador de nombre que evita
      * que los datos pasen directamente en la instrucción SQL
      * pues serán pasados aparte, usando bindValue(":id",$id)
     */  
    $sql = "SELECT * FROM books WHERE id<=:id ORDER BY id"; 

    /**
      * La variable $id, puesta aquí manualmente, puede venir de cualquier sitio
      * por ejemplo de un formulario, siendo recuperada mediante $_POST["id"]
      * es la variable que se pasa aparte. 
      * Supongamos que dicha variable es recogida de un formulario y pasada
      * directamente en la consulta. 
      * Si un usuario malicioso escribe esto en el form:  5; DELETE FROM books
      * al enviar la consulta sin prepararla tendríamos una Inyección de código malicioso
      * que borraría completamente los datos de la tabla libros.
      * Imaginemos que tenemos millones de registros en esa tabla... 
      * cualquiera podría borrarla así de fácil si no usamos consultas preparadas
      * Eso se evita escribiendo la instrucción SQL como se ha mostrado más arriba
      * y pasando el valor de $id aparte, mediante bindValue()
     */  

    $id=5;
    $stmt = $pdo->prepare($sql);
    $stmt->bindValue(":id",$id);
    $stmt ->execute();
    $arrDatos = $stmt->fetchAll(PDO::FETCH_ASSOC);

    /**
      * Preguntamos si la consulta devolvió datos y si es así, los imprimimos
      * Otro aspecto interesante de PDO es que no es necesario usar rowCount
      * para saber si la consulta devolvió datos,
      * basta con verificar los mismos datos con un if, ya que si no devuelve nada
      * el valor de $arrDatos sería FALSE
     */  

    if ($arrDatos)
    {          

       /**
         * En la variable $html iremos concatenando un formulario
         * que se llenará  con los  resultados  de la  consulta
       */  

        $html="<form>";
        foreach ($arrDatos as $row)
        {
            $html.= "Id:<input type='text' name='id' size='5' value='".$row["id"]."'>";
            $html.= "Título:<input type='text' name='titulo' size='25' value='".$row["title"]."'><br />";
        }
        $html.="</form>";
        /* Imprimimos el  formulario */
        echo $html;

    }
    else
    {
        echo "No hay datos";
    }

    $pdo = null;

    ?>

Resultado:

<pre><form>Id:<input type='text' name='id' size='5' value='1'>Título:<input type='text' name='titulo' size='25' value='Platero y Yo'><br />Id:<input type='text' name='id' size='5' value='2'>Título:<input type='text' name='titulo' size='25' value='Un hombre para la eternidad'><br />Id:<input type='text' name='id' size='5' value='3'>Título:<input type='text' name='titulo' size='25' value='Romeo y Julieta'><br />Id:<input type='text' name='id' size='5' value='4'>Título:<input type='text' name='titulo' size='25' value='El Quijote'><br />Id:<input type='text' name='id' size='5' value='5'>Título:<input type='text' name='titulo' size='25' value='Los Miserables'><br /></form></pre>


Segundo escenario: peticiones al servidor

En el escenario uno se ha explicado una forma adecuada de consultar los datos. Y se ha mostrado un ejemplo de presentación de los resultados obtenidos. Pero allí todo ocurre en el mismo contexto.

Ahora bien, ¿qué ocurre si desde una página queremos obtener una dato y en base a ese dato obtener otros?

Imaginemos que en la página del escenario 1 tienes un select con todos los libros de la tabla libros y quieres todos los detalles de un libro en específico.

En ese caso combinas tu código anterior con Javascript. Eliges un libro y lanzas en background una petición al servidor, a un archivo php muy parecido al del escenario 1, que hará la consulta y responderá con un objeto JSON el cual podrás presentar en tu página sin necesidad de refrescarla.

El siguiente ejemplo está tomado de la repuesta de @MarcosGallardo a la pregunta: Enviar datos al servidor mediante Ajax usando Promesas de JavaScript Esto se puede hacer con librerías como jQuery. No obstante, puedes aprender a implementar esta técnica nueva que usas Promesas de Javascript y te libra de tener que depender de otras librerías.

En el ejemplo se consulta la siguiente URL: https://api.github.com es la API de Github, la cual responde con un objeto JSON que luego puede ser leído.

Si en tu programa cambias esta URL por un archivo PHP que responda en JSON, por ejemplo (tu-archivo.php), funcionaría igual. El código muestra la forma de obtener la información del objeto y presentarla en pantalla.

La nueva API Fetch permite realizar llamadas "AJAX" (Request) e implementa Promises por defecto.

Ejemplo de uso:

function get(method) {
  var url = document.getElementById("datos").value;

  fetch(url, {
    method: method
  }).then(function(response) {
    response.json().then(function(object) {
      console.log("¡Correcto!", object);
	  result= document.getElementById("result");
	  result.innerHTML(object.current_user_url);
	  result.innerHTML(object.current_user_email);

    });
  }).catch(function(error) {
    console.error("!Hubo un error!", error);
  });
}
Introduzca URL de un servicio REST y pulse Enviar:<br />
<input id="datos" type="text" value="https://api.github.com" size="33" />
<input type="button" onclick="get('GET')" value="Enviar..." />
<hr />
<div id"result"></div>

1
  • me parece super bien explicada tu respuesta y me ha ayudado a entender diferentes cosas. me gustaria saber si me puedes apoyar con el problema actual que tengo ya que estoy usando una de las plantillas de Admin LTE y ahi no me parece funcionar el recuper datos del servidor y mostrarlos en los inputs
    – cesg.dav
    el 28 jul. 2017 a las 21:03
0

Si tu código está tal cual lo has puesto y el nombre viaja en la url (dado que estás cumplimentando el campo ID, tendrías que poner cómo rescatas el nombre o la ID, y si lo está haciendo bien, la sentencia del if es falsa por lo tanto no se ejecuta lo que hay en el interior.

Estás evaluando si $_POST["nombre"] está vacío, al no estarlo (vuelvo a repetir que supongo que no lo está por tus explicaciones) lo salta. Tienes que poner la inversa, si no está vacío if(!empty($_POST["nombre"]))...

Quedaría así:

if(!empty($_POST['nombre'])){ 

    $nombre = $_POST['nombre']; 

    $res = mysql_query("select * from usuarios where nombre='"$nombre"'") or die(mysql_error());

    while($row = mysql_fetch_array($res)){

        if (condition) {

          # code...

        }
}
2
  • Gracias por responder david, permiteme poner todo mi codigo, desde el html y el de js
    – cesg.dav
    el 28 jul. 2017 a las 6:11
  • espero puedas ayduarme a mostrarme como poner el resultado en el if
    – cesg.dav
    el 28 jul. 2017 a las 6:15
0

en cliente.php bastaba con colocar el arreglo de la siguiente manera

if(!empty($_POST['nombre'])){ 

$nombre = $_POST['nombre'];

$sql = "SELECT * FROM usuarios WHERE nombre = '$nombre'";  
$stmt = $gbd->prepare($sql);
$stmt ->execute();
$arrDatos = $stmt->fetchAll(PDO::FETCH_ASSOC);

  if($arrDatos){
    foreach ($arrDatos as $row) {
      if ($nombre = $row['nombre']) {
        $return = array ('telefono' => $row['telefono'], 'direccion' => $row['direccion']);
      }      
    }
  } else {
    $return = array('error'=>'El nombre no esta guardado en la base de datos');
  }
  die(json_encode($return));
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.