4

Tengo un problema hipotético:

Mipagina.php

 <?php if(isset($_GET['nombre']) && !empty($_GET['nombre'])) :?>
    <?php $nombre = $_GET['nombre'];?>
    Hola <?php echo $nombre;?>
<?php else:?>
    <form id="formulario">
    <input type="text" name="nombre"/>
    <button type="submit" class="consultar">Consulta tu nombre</button>
    </form>
<?php endif;?>

Script.js

$(document).on('click', '.consultar', function(e) {
  e.preventDefault();
  $('#formulario').submit();
});

Es fundamental ingresar el valor de nombre, para que muestre información. En el caso de que no exista nombre, mostrará un formulario para consultar nombre.

Hasta acá todo parece estar correcto, el problema comienza:

No quiero actualizar la página al momento de ingresar el valor nombre, entonces opto por usar ajax.

Mipagina.php

<?php if(isset($_GET['nombre']) && !empty($_GET['nombre'])) :?>
<?php $id = $_GET['nombre'];?>
Hola <?php echo $nombre;?>
<?php else:?>
<form id="formulario">
   <input type="text" class="nombre" name="nombre"/>
   <button type="submit" class="consultar">Consulta tu nombre</button>
</form>
<div id="resultado-ajax"></div>
<?php endif;?>

Ajax.php

<?php $nombre = $_POST['nombre'];
echo $nombre;?>

Script.js

$(document).on('click', '.consultar', function(e) {
  e.preventDefault();
  consulta_Ajax();
});

function consulta_Ajax() {
  nombre = $('.nombre').val();
  $.post({
    url: 'Ajax.php',
    dataType: 'html',
    nombre: nombre, 
  }).done(function(respuesta) {
    $('#formulario').hide(); // esconde formulario
    $('#resultado-ajax').html(respuesta); // imprime respuesta
   window.history.replaceState({}  ,   ''  ,    '?nombre='+respuesta);
  });
}

Tengo dos acciones: La primera es cuando el usuario ingresa a : Mipagina.php?nombre=Juanito y la segunda, por si no ingresa su nombre, lo consulta mediante el formulario.

Esto funciona, pero la pregunta es: ¿Existe otro método para lograr esto? ¿Es necesario tener que escribir dos veces el resultado? URL y Ajax?

Vale!

3
  • Veo que debes definir bien las variables. var nombre = $('.nombre').val();. Estás enviando como parámetro de la función .ajax() nombre: nombre. Debes enviar data: {nombre: nombre}. En dataType es: dataType: "html". Commented el 19 ago. 2016 a las 18:22
  • Existen otras alternativas para realizar lo mismo, una de ellas es usar JavaScript puro, sin necesidad de usar jQuery. Recuerda que para esta funcionalidad que estás implementando, no necesitas cargar toda una librería, que en su interior contiene más 100 funciones en JavaScript, para que sólo utilices una pequeña cantidad de éstas. Lamentablemente no puedo añadir una respuesta para mostrarte un ejemplo. Commented el 19 ago. 2016 a las 18:30
  • gracias! Lo que quiero lograr es no volver a escribir el resultado en dos partes distintas, pero quizás es imposible. ya en ajax.php despliego la información mediante POST, y luego si el usuario refresca la página por ABC motivos, obtiene la información mediante GET Commented el 19 ago. 2016 a las 18:39

1 respuesta 1

5

viendo tu codigo asi se me ocurre ayudarte con esa guia a ver si te puede solucionar mejor el problema que indicas

if(isset($_GET['nombre']) && !empty($_GET['nombre'])){

   $nb="Hola '.$_GET['nombre'].'";

   }else{

   $nb="<form id='formulario'>
   <input type='text' class='nombre' id='nombre' name='nombre'/>
   <button type='submit' id='btn' class='consultar'>Consulta tu nombre</button>
</form>";

   }

//para el script haria algo como esto

<script type="text/javascript">
            $(document).ready(function(){
                $("#btn").onclick(function(){
                    $.ajax({
                        url:"Ajax.php",
                        type: "POST",
                        data:"nombre="+$("#nombre").val(),
                        success: function(){
                            $("#resultado-ajax").html(opciones);
                        }
                    })
                });
            });
        </script>

//donde se depositara la respuesta

<div id="resultado-ajax"><?php echo $nb?></div>
1
  • omg! estuve dos días tratando de entender el proceso! muchas gracias máquina! Commented el 19 ago. 2016 a las 19:16

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.