0

Buenos días tardes y/o noches.

Estoy intentando hacer mi pagina web de forma dinámica, que llame contenido sin necesidad de recargar la pagina, puesto que es una pagina de una sola vista y no múltiples (o esa es la idea). El enlace es este -> Gabriel Yturrino.

Lo intente con Js utilizando el siguiente código:

function abrirUrl(url, container) {

    $.get(url, {}, function (data) {

        $("#" + container).html(data);

    });

}

Pero no lograba que llamara el contenido. Luego vi en un video que con PHP podría realizarlo, y si funciona, pero el detalle es que para cargar la nueva información, se recarga toda la pagina como si hubieras ingresado nuevamente.

El código PHP es este:

<?php

//Logica para capturar la pagina que deseas abrir
    $pagina = isset($_GET['p']) ? strtolower($_GET['p']) : 'inicio';

//Frangmento de la primera parte del HTML
    require_once 'includes/header.php';

//Ubica la pagina a solicitar. Caso contrario rediriege a la pagina 404
    @require_once 'pages/' . $pagina . '.php';

//Ultima parte del cuerpo del HTML

    require_once 'includes/foot.php'

?>

Este es el código del menú:

<nav class="menu">
                        <ul>
                            <li class="<?php echo $pagina == 'inicio' ? 'active' : ''; ?>">
                                <a href="?p=inicio" class="opciones"><i class="icon-persona"></i><span>Sobre mí</span>
                            </a></li>
                            <li class="<?php echo $pagina == 'experiencia' ? 'active' : ''; ?>">
                                <a href="?p=experiencia" class="opciones"><i class="icon-laboral"></i><span>Experiencia Laboral</span>
                            </a></li>
                            <li class="<?php echo $pagina == 'portfolio' ? 'active' : ''; ?>">
                                <a href="?p=portfolio" class="opciones"><i class="icon-portafolio"></i><span>Portafolio</span>
                            </a></li>
                            <li class="<?php echo $pagina == 'estudios' ? 'active' : ''; ?>">
                                <a href="?p=estudios" class="opciones"><i class="icon-estudios"></i><span>Estudios Realizados</span>
                            </a></li>
                        </ul>
                    </nav>
8
  • 1
    debes crear un <div> u otro elemento con nombre por medio del cual puedas hacer el llamado solo a ese <div>, paralelamente tu div debe ser igual que el de la pagina original para no perder formatos.
    – rpaillao
    Commented el 14 jun. 2022 a las 17:16
  • Claro, cuando use Js, lo hice como me indicas... teniendo un div identificado por una clase (la misma del código js) donde se colocara la la info llamada pero simplemente nunca la llamaba. Commented el 14 jun. 2022 a las 17:18
  • El llamado se hace manualmente a través de algún botón o link o evento o alguna rutina con tiempo programado, recuerde que la página se enviá al cliente según la petición que el hace al servidor, el html es estático y se ejecuta en la maquina cliente.
    – rpaillao
    Commented el 14 jun. 2022 a las 17:25
  • El llamado de hace manualmente, al hacer clic en el enlace del menú Commented el 14 jun. 2022 a las 17:30
  • 1
    Google indexa bien las SPA. Solo encargate de poner las meta tags y tabaja bien el diseño responsive
    – Aleman
    Commented el 14 jun. 2022 a las 18:17

1 respuesta 1

2

Te dejo un ejemplo de la implementación de un colega.

<script>
$(document).ready(function() {
    $('#btn1').on('click', function(){
        $.ajax({
            type: "POST",
            url: "hola.php",
            success: function(response) {
                $('#div-results').html(response);
            }
        });
    });
});
</script>

Esta función se debe llamar mediante un botón llamado btn1

<a class="btn btn-success" id="btn1">Ver el archivo que contiene hola</a>

dentro de la página estara el div a modificar

<div id="div-results"></div>

y por otro lado tu archivo php es el que hará la interacción con el servidor

<?php
echo '<p>ESTE ES EL ARCHIVO PHP QUE CONTIENE EL HOLA</p>';
?>

te dejo su enlace

4
  • Esta es una respuesta muy valida! Recuerda utilizar La CDN de JQuery
    – Aleman
    Commented el 14 jun. 2022 a las 18:25
  • Voy a probar implementándola gracias por la guía! Commented el 14 jun. 2022 a las 21:29
  • Algo debo de estar haciendo mal por que sigue sin llamar al contenido... Estoy haciendo un descarte implementando algo totalmente simple para encontrar el error... Gracias por la respuesta igualmente! Commented el 22 jun. 2022 a las 18:18
  • Solucionado @rpaillao gracias por la ayuda Commented el 22 jun. 2022 a las 22:02

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.