Se me ocurren unas cuántas formas, una es la que te dijo @AlvaroMontoro; otra es mediante la History API y otra es usando un router en la parte cliente.
History API
Esta API es muy práctica e intuitiva de usar. Tienes algunos métodos a disposición:
El método que nos interesa más es pushState
. Este método añade una entrada a la historia del navegador. Supongamos que haces click en Home, luego en Portafolio y por último en Contáctame, entonces, la pila de historia para tu dominio será:
- Home -> Portafolio -> Contáctame
Y si haces click en atrás del navegador seguirás ese orden en modo reverso.
El método pushState
no comprueba si la URL o página que se le indica existe o no. Este método solo la añade al stack de historia. Este método recibe tres parámetros: objeto de estado (para almacenar información respecto a la URL a cargar), el título del documento (ignorado por algunos navegadores) y la nueva URL (relativa) a mostrar.
$(document).ready(function () {
$('#menu a').on('click', function (e) {
e.preventDefault();
var menuName = $(this).text();
$.ajax({
url: "formulario.php?page" + menuName,
dataType: 'text',
})
.done(function (html) {
$('#sentences').html(html);
history.pushState(
{},
menuNames.charAt(0).toUpperCase() + string.slice(1),
menuName
);
})
.fail(function (xhr, status, error) {
// hacer algo
});
});
});
El código anterior hace lo siguiente: cada vez que se haga click en un menú, se obtiene le HTML de la sección que indica el menú por medio del parámetro ?page
el cual se recibe en el backend y se envía una vista de acuerdo a ella. Finalmente, actualiza la URL de modo que si:
- Vas a Home: la URL será /tuapp/home.
- Vas a Portafolio: la URL será /tuapp/portafolio.
- Vas a Contáctame: la URL será tuapp/contáctame
Usando un Router del lado cliente
Tienes algunas opciones aquí, como Page.js y Navigo. Me gusta más Page.js porque se parece mucho al router de Vue.js. El mismo ejemplo que el anterior puede hacerse con Page.js:
$(document).ready(function () {
page.base('/app'); // nombre de tu app
page('/home', render);
page('/portafolio', render);
page('/contactame', render);
page(); // inicializa page.js
});
function render (ctx, next) {
let pageName = ctx.pathname.split('/').reverse()[0];
$.ajax({
url: "formulario.php?page=" + pageName,
dataType: 'text',
})
.done(function (html) {
$('#sentences').html(html);
})
.fail(function (xhr, status, error) {
// hacer algo
});
});
En este caso, no es necesario prevenir las acciones por defecto de los links ya que de eso se encarga Page.js. Solo debes definir tu ruta base (<base href="/tuapp/">
) y encargarte de traer el HTML e insertarlo en el documento.
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Demo Page.js</title>
<base href="/app/">
</head>
<body>
<a href="home">Home</a>
<a href="portafolio">Portafolio</a>
<a href="contactame">Contactame</a>
<div id="view-router"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/page.js/1.7.1/page.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
page.base('/app');
page('/home', render);
page('/portafolio', render);
page('/contactame', render);
page();
});
function render (ctx, next) {
let viewRouter = document.getElementById('view-router');
let pageName = ctx.pathname.split('/').reverse()[0];
viewRouter.innerHTML = `Estás viendo ${pageName}`;
}
</script>
</body>
</html>