2

Estou em um projeto, onde a camada de front-end está totalmente, TOTALMENTE separada da banck-end. Elas se comunicam via ajax por REST.

E nesse projeto, eu gostaria de quebrar o html, para não ficar com conteúdo duplicado. Assim como fazemos em asp.net (master.pages e usercontrols), java, php, etc. Por exemplo criando um topo/cabeçalho e um rodapé q são sempre fixos em uma pagina template, e o conteudo dessa carrega apenas o conteudo de outras páginas.

O grande problema é que preciso fazer isso utilizando somente HTML5 ou no maximo JavaScript. Até onde meus conhecimentos vão, isso não e muito possível. Tentei usar o iframe do html, mas não é muito funcional.

Alguém tem alguma idéia, ou referência de como resolver isso?

Obrigado desde já.

8
  • Alguma restrição em se ter, por exemplo, um <section> ou um <article> com ID definido e você carregar dados com $.ajax e populá-lo com jquery.html()? Commented 1/07/2014 às 18:26
  • Não tem restrição @BrunoAugusto, tem alguma referência de como posso fazer isso? Commented 1/07/2014 às 18:27
  • O próprio manual de jQuery.ajax() tem exemplos, apesar de apenas um deles demonstrar o uso de um seletor quando a requisição se completera, no done(). Commented 1/07/2014 às 18:33
  • Beleza, vou dar uma olhada, e espero que isso me traga solução. Os dados do que vou carregar com $.ajax, pode ser um pedaço de código html em um arquivo de texto, certo? Por exemplo menu.html Commented 1/07/2014 às 18:37
  • 3
    recomendo o uso de algumas bibliotecas criadas para este fim como o knockoujs AngularJs BackBoneJs ou EmberJs. Eles forncem Two-Way bindings entre o html e os dados do backend por javascript. Em um dos tutorias do KnockOutJs ele ensina a criar uma SinglePage Application (que é o que eu acredito você procura)
    – Caputo
    Commented 1/07/2014 às 18:47

1 Resposta 1

3

No bruto seria mais ou menos assim, você adaptaria de acordo com o seu projeto

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <section id="content">
        <!-- conteúdo das páginas -->
    </section>

</body>
</html>

Javascript

function pagLoad(pag) 
{
    $.ajax({
        url: pag,
        success: function(data){
            $("#content").html(data);
        }
    });
}

Exemplo de chamada:

pagLoad("contato.html");
3
  • 1
    Valeu pela ajuda cara, isso ai funcionou certinho aqui. Como não manjo muito de ajax, não fazia ideia de que era possível fazer isso. Vlw Commented 1/07/2014 às 20:01
  • show!! qualquer dúvida só colocar ai Commented 1/07/2014 às 20:12
  • Fiz como me recomendou, mas algumas vezes o conteudo importado parece não ser carregado. Já ocorreu isso contigo? Commented 10/07/2014 às 13:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .