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!
var nombre = $('.nombre').val();
. Estás enviando como parámetro de la función.ajax()
nombre: nombre
. Debes enviardata: {nombre: nombre}
. En dataType es:dataType: "html"
.