Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] ¿Como recibo varios parámetros con AJAX?

Estas en el tema de ¿Como recibo varios parámetros con AJAX? en el foro de Jquery en Foros del Web. Hola a todos, necesito una manito. como le hago para recibir varios parámetros de una pagina con Ajax y ponerlos en los input's de un ...
  #1 (permalink)  
Antiguo 01/03/2015, 09:46
 
Fecha de Ingreso: febrero-2015
Mensajes: 9
Antigüedad: 9 años, 1 mes
Puntos: 0
Pregunta ¿Como recibo varios parámetros con AJAX?

Hola a todos, necesito una manito.

como le hago para recibir varios parámetros de una pagina con Ajax y ponerlos en los input's de un formulario.
la idea es que al momento de estar llenando el formulario en el input de codigo y se compruebe en tiempo real si ese codigo esta en la base de datos y si esta que diga que ya existe y traiga los otros campos y los coloque en sus respectivos inputs.

hasta el momento he logrado hacer la consulta y pasar los campos en una etiqueta span

Código HTML:
 <form>
    <fieldset>
      <label for="codigo">Código</label>
      <input type="text" name="codigo2" id="codigo2"  value=""><span id="resultado"></span>
      <label for="nombre">Nombre</label>
      <input type="text" name="nombre2" id="nombre2" value="" >
      <label for="direccion">Dirección</label>
      <input type="text" name="direccio2n" id="direccion2" value="" >
      <label for="telefono">telefono</label>
      <input type="text" name="telefono2" id="telefono2" value="" >
      <label for="fechanac">fecha nacimiento</label>
      <input type="text" name="fechanac2" id="fechanac2" readonly value="" >
      <label for="codpro">código de producto</label>
      <input type="text" name="codpro2" id="codpro2" value="" >
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
      <p align="center" ><img  src="/programacionWeb/formularioPHP/nuevo.png" > </p>
 </fieldset>
  </form> 


con este condigo me realiza la consulta y me trae los valores pero no los puedo separar y ponerlos en los inputs correspondientes.

Código:
$(document).ready(function(){
                         
      var consulta;
             
      //hacemos focus
      $("#codigo").focus();
                                                 
      //comprobamos si se pulsa una tecla
      $("#codigo").keyup(function(e){
             //obtenemos el texto introducido en el campo
             consulta = $("#usuario").val();
                                      
             //hace la búsqueda
             $("#resultado").delay(1000).queue(function(n) {      
                                           
                  $("#resultado").html('<img src="ajax-loader.gif" />');
                                           
                        $.ajax({
                              type: "POST",
                              url: "comprobar.php",
                              data: "b="+consulta,
                              dataType: "html",
                              error: function(){
                                    alert("error petición ajax");
                              },
                              success: function(data){                                                      
                                    $("#resultado").html(data);
                                    n();
                              }
                  });
                                           
             });
                                
      });
                          
});

aquí la pagina .php donde voy hacer la consulta

Código PHP:
      $user $_POST['b'];
       
      if(!empty(
$user)) {
            
comprobar($user);
      }
       
      function 
comprobar($b) {
            
$con mysql_connect('localhost','root''root');
            
mysql_select_db('trabajo'$con);
       
            
$sql mysql_query("SELECT codigo, nombre, direccion, telefono, fechanac, codpro FROM usuarios WHERE codigo = '".$b."'",$con);
             
            
$contar mysql_num_rows($sql);
            while (
$row mysql_fetch_row($sql)){ 
            if(
$contar == 0){
                
                  echo 
"<span style='font-weight:bold;color:green;'>Disponible.</span>";
            }else{
                  echo 
"<span style='font-weight:bold;color:red;'>'Código existente. '".$row[0]." - ".$row[1]." - ".$row[2]."- ".$row[3]."- ".$row[4]."- ".$row[5]."</span> ";
                 
            }
            }
      } 
si alguno sabe una forma de realizar este proceso se lo agradecería si me lo compartiera

Última edición por jonacional; 01/03/2015 a las 09:50 Razón: error digitación
  #2 (permalink)  
Antiguo 01/03/2015, 14:17
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: ¿Como recibo varios parámetros con AJAX?

Necesitas crear un array con los datos devueltos por la consulta a la base de datos, codificarlo en formato JSON e imprimirlo, de esta manera, en el método Ajax, recibirás un objeto, el cual contendrá los valores para asignar a las cajas de texto.

En el método $.ajax, cambia esto:

Código Javascript:
Ver original
  1. dataType: "html"

Por esto:

Código Javascript:
Ver original
  1. dataType: "json"

En tu archivo PHP, la respuesta debe de tener una forma similar a esta:

Código PHP:
Ver original
  1. if (!$contar){
  2.     $respuesta = array('mensaje' => 'Disponible',
  3.                        'codigo' => $row['codigo'],
  4.                        'nombre' => $row['nombre'],
  5.                        'direccion' => $row['direccion'],
  6.                        'telefono' => $row['telefono'],
  7.                        'fechnac' => $row['fechnac'],
  8.                        'codpro' => $row['codpro']);
  9. }
  10. else{
  11.     $respuesta = array('mensaje' => 'Código inexistente');
  12. }
  13.  
  14. echo json_encode($respuesta);

Y en el método success, deberías de tener esto:

Código Javascript:
Ver original
  1. success: function(data){
  2.     if (data.mensaje == "Disponible"){
  3.         $("#codigo2").val(data.codigo);
  4.         $("#nombre2").val(data.nombre);
  5.         $("#direccion2").val(data.direccion);
  6.         $("#telefono2").val(data.telefono);
  7.         $("#fechnac2").val(data.fechnac);
  8.         $("#codpro2").val(data.codpro);
  9.     }
  10.  
  11.     $("#resultado").html(data.mensaje);
  12. }

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 01/03/2015 a las 16:01 Razón: Olvidé el campo del teléfono. :-P
  #3 (permalink)  
Antiguo 01/03/2015, 15:14
 
Fecha de Ingreso: febrero-2015
Mensajes: 9
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: ¿Como recibo varios parámetros con AJAX?

Cita:
Iniciado por Alexis88 Ver Mensaje
Necesitas crear un array con los datos devueltos por la consulta a la base de datos, codificarlo en formato JSON e imprimirlo, de esta manera, en el método Ajax, recibirás un objeto, el cual contendrá los valores para asignar a las cajas de texto.
Saludos
Gracias Alexis88 por tu respuesta, pero me ha salido error en la petición ajax

Código:
 $.ajax({
                              type: "POST",
                              url: "formulario.php",
                              data: "b="+consulta,
                              dataType: "json",
                              error: function(){
                                    alert("error petición ajax");
                              },
                              success: function(data){
                              if (data.mensaje == "existente"){
                              $("#codigo2").val(data.codigo);
                              $("#nombre2").val(data.nombre);
                              $("#direccion2").val(data.direccion);
                              $("#fechnac2").val(data.fechnac);
                              $("#codpro2").val(data.codpro);
                               }
 
                             $("#resultado").html(data.mensaje);
                               }
                  });
  #4 (permalink)  
Antiguo 01/03/2015, 15:40
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: ¿Como recibo varios parámetros con AJAX?

Verifica qué resultado está devolviendo la petición con esto:

Código Javascript:
Ver original
  1. error: function(jqXHR, textStatus, errorThrown) {
  2.     console.log(jqXHR, textStatus, errorThrown);
  3. }

Si estás usando Google Chrome, pulsa la tecla F12, selecciona 'Console' y ejecuta el código. Se mostrará la información relacionada al error y así sabremos qué está ocurriendo.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 01/03/2015, 16:04
 
Fecha de Ingreso: febrero-2015
Mensajes: 9
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: ¿Como recibo varios parámetros con AJAX?

He cambiado las lineas en error
y en mirado en la consola del navegador y ha arrojado esto:

Código:
Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
 "parsererror" 
SyntaxError: Unexpected token < {stack: (...), message: "Unexpected token <"}
message: "Unexpected token <"
stack: "SyntaxError: Unexpected token <↵    at Object.parse (native)↵    at jQuery.extend.parseJSON (http://code.jquery.com/jquery-1.10.2.js:550:23)↵    at ajaxConvert (http://code.jquery.com/jquery-1.10.2.js:8429:19)↵    at done (http://code.jquery.com/jquery-1.10.2.js:8185:15)↵    at XMLHttpRequest.jQuery.ajaxTransport.send.callback (http://code.jquery.com/jquery-1.10.2.js:8778:8)"
get stack: function () { [native code] }
set stack: function () { [native code] }
__proto__: Error
  #6 (permalink)  
Antiguo 01/03/2015, 17:13
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: ¿Como recibo varios parámetros con AJAX?

Corrobora que todo esté bien en tu archivo PHP. Si es necesario, revisa línea por línea, con mucha calma.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #7 (permalink)  
Antiguo 01/03/2015, 19:00
 
Fecha de Ingreso: febrero-2015
Mensajes: 9
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: ¿Como recibo varios parámetros con AJAX?

Cita:
Iniciado por Alexis88 Ver Mensaje
Corrobora que todo esté bien en tu archivo PHP. Si es necesario, revisa línea por línea, con mucha calma.

Saludos

Gracias Alexis88, ya lo he solucionado y va de maravilla, me a tocado investigar un poco sobre como trabaja JSON.
pongo el código por si alguien mas lo necesita.

Código HTML:
 <header>
            <h1>Parsear o leer JSON con jQuery</h1>
        </header>

        <!-- Contenido -->
        <section>
            <form>
    <fieldset>
      <br><label for="codigo">Código</label>
      <input type="text" name="codigo2" id="codigo2"  value="" class="text ui-widget-content ui-corner-all"><span id="resultado"></span><br>
      <br><label for="nombre">Nombre</label>
      <input type="text" name="nombre2" id="nombre2" value="" class="text ui-widget-content ui-corner-all"><br>
      <br><label for="direccion">Dirección</label>
      <input type="text" name="direccion2" id="direccion2" value="" class="text ui-widget-content ui-corner-all"><br>
      <br><label for="telefono">telefono</label>
      <input type="text" name="telefono2" id="telefono2" value="" class="text ui-widget-content ui-corner-all"><br>
      <br><label for="fechanac">fecha nacimiento</label>
      <input type="text" name="fechanac2" id="fechanac2" readonly value="" class="text ui-widget-content ui-corner-all"><br>
      <br><label for="codpro">código de producto</label>
      <input type="text" name="codpro2" id="codpro2" value="" class="text ui-widget-content ui-corner-all">
 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
			

			<script type="text/javascript">

			$(document).ready(function(){
		    $("#codigo2").focus();
            $("#codigo2").keyup(function(e){
			var url="generarJSON.php";
			$.getJSON(url,{ _num1 : $("#codigo2").val() }, function(clientes){
			$.each(clientes, function(i,cliente){
			$("#nombre2").val(cliente.nombre);
			$("#direccion2").val(cliente.direccion);
			$("#telefono2").val(cliente.telefono);
			$("#fechanac2").val(cliente.fechanac);
			$("#codpro2").val(cliente.codpro);
			if (cliente.resultado == "1"){
			$("#resultado").css("color","red");
			$("#resultado").text("código no disponible");
			}else{
				$("#resultado").css("color","green");
			$("#resultado").text("código  disponible");
				}
			});
			});
			});
			});
			</script>

 
        </section> 

y el .php donde consulta

Código PHP:
       $cod $_GET['_num1'];
       
      if(!empty(
$cod)) {
            
comprobar($cod);
      }
       
      function 
comprobar($cod) {
            
$con mysql_connect('localhost','root''root');
            
mysql_select_db('trabajo'$con);
       
            
$sql mysql_query("SELECT codigo, nombre, direccion, telefono, fechanac, codpro FROM usuarios WHERE codigo = '".$cod."'",$con);
            
$clientes = array(); //creamos un array
            
$contar mysql_num_rows($sql);
            if(
$contar == 0){
                 
$clientes[] = array('codigo'=> '''nombre'=> '''direccion'=> '''telefono'=> '',
                        
'fechanac'=> '''codpro'=> '''resultado' =>  );
            
            }else{
             while (
$row mysql_fetch_row($sql)){ 
                  
    
$codigo=$row[0];
    
$nombre=$row[1];
    
$direccion=$row[2];
    
$telefono=$row[3];
    
$fechanac=$row[4];
    
$codpro=$row[5];
    

    
$clientes[] = array('codigo'=> $codigo'nombre'=> $nombre'direccion'=> $direccion'telefono'=> $telefono,
                        
'fechanac'=> $fechanac'codpro'=> $codpro'resultado' =>  );
               
                                                   }
                }
                
$json_string json_encode($clientes);
                echo 
$json_string;
           } 
ya consulta en tiempo real si el código del usuario existe en una base de datos y si es el caso de que si, trae los datos pertenecientes a ese registro y los pone en una caja de texto.
  #8 (permalink)  
Antiguo 01/03/2015, 20:46
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: ¿Como recibo varios parámetros con AJAX?

A menos de que la consulta a la BD devuelva varios registros, es decir, que en la búsqueda se encuentren varias coincidencias, los bucles while como $.getJSON, son innecesarios pues solo iterarían una vez. Prueba sin los bucles, tomando y asignando los valores directamente, de esta manera, tu script será un tanto más eficiente.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #9 (permalink)  
Antiguo 04/03/2015, 12:27
 
Fecha de Ingreso: febrero-2015
Mensajes: 9
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: ¿Como recibo varios parámetros con AJAX?

Cita:
Iniciado por Alexis88 Ver Mensaje
A menos de que la consulta a la BD devuelva varios registros, es decir, que en la búsqueda se encuentren varias coincidencias, los bucles while como $.getJSON, son innecesarios pues solo iterarían una vez. Prueba sin los bucles, tomando y asignando los valores directamente, de esta manera, tu script será un tanto más eficiente.

Saludos
si tienes toda la razón gracias!!

Etiquetas: ajax, formulario, html, input, javascript, php, recibo, select, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:05.