0

Tenho uma página em php que faz require do header, sidebar, e footer, mas o conteúdo do body gostaria de pagar dinamicamente passando o link para o require via jquery, não quero trabalhar com framework uma vez que será um projeto pequeno.

Meu cenário é este:

Tenho vários links no menu e gostaria de chama-los dinamicamente para carregar o body.

Código JS e HTML

$(function(){
     $('.main-link').on('click', function(e){
       var lnk = $(this).attr('data-link');
       console.log(lnk);
       $.ajax({
          type:'post',          
          data: {link : lnk},
          url: 'paginas.php',
          dataType: 'html',
          error: function(xhr) {
            $("div#error").html('Erro ao passar variavel: ' + xhr.responseText);
        }
       });
     }) 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="main-link" data-link="pagina.php" href="#">Página</a></li>
</ul>

arquivo.php que carrega o body da página

<?php
$lnk = $_POST['link'];
include $lnk; //o include só está funcionando se colocar o link direto
?>

O arquivo.php só carrega no load e quando já tem um link definido como este: include "pagina.php" do contrario não funciona.

Aceito sugestões diferentes ao que estou pensando, talvez tenha que fazer um $_GET na url, mas não queria passar o link por url, o arquivo.php será o container da página e receberá muitos botões e links e algumas vezes conteúdo do banco como tabelas.

1

1 Resposta 1

1

Tentarei ser o mais claro possível para não confundir, pois a questão ai está na lógica, não entrarei em detalhes de segurança ou uso de charset, mas essas questões devem ser visadas, vamos lá...

Html: marcação (front-end);

Javascript & Jquery: ação, eventos e outros (usando como front-end);

PHP: gestão dos dados, conexões com banco de dados, entre outros (back-end).

apenas um resumo básico para entender como vamos montar esse quebra cabeça...

Passo 1

Inicialmente você terá que cria o arquivo html com a estrutura básica e com os elementos de uso para funcionamento do script js e jquery, exemplo (index.html):

INICIO - ESTRUTURA HTML BÁSICA

INICIO - BODY

<div id="error">

</div>

<div id="mostra-pagina">

</div>

<ul>
  <li><a class="main-link" data-link="pagina_1.php" href="#">Página 1</a></li>
  <li><a class="main-link" data-link="pagina_2.php" href="#">Página 2</a></li>
  <li><a class="main-link" data-link="pagina_3.php" href="#">Página 3 não existe</a></li>
</ul>

<!-- javascript
================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  console.log('teste');

  $(function() {

   $('.main-link').on('click', function(e) {

     e.preventDefault();

     var lnk = $(this).attr('data-link'),
         opcao2 = 'Meu teste';

     console.log(lnk);

     $.ajax({
        type:'post',
        data: {link : lnk, 'opcao2': opcao2},
        url: 'indice.php',
        dataType: 'html',
        error: function(xhr) {
          $("div#error").html('Erro ao passar variavel: ' + xhr.responseText);
        },
        success: function(retornoBackend) {
          $("div#mostra-pagina").html(retornoBackend);
        }
     });
   })

  });
</script>

FIM - BODY

FIM - ESTRUTURA HTML BÁSICA

OBS: Lembre-se de colocar a estrutura do html, pois o Stackoverflow não permite que eu as coloque aqui.

Passo 2

Criaremos o indice das páginas, exemplo (indice.php):

switch ($_POST['link']) {

case 'pagina_1.php':
  include($_POST['link']);
break;

case 'pagina_2.php':
  include($_POST['link']);
break;

default:
  print_r('não existe');
break;}

OBS: Lembre-se de colocar a estrutura do php.

Passo 3

Páginas de inclusão, (pagina_1.php ou pagina_2.php):

print_r ('link: '. $_POST['link'] .' | opcao2: '. $_POST['opcao2']);

OBS: Lembre-se de colocar a estrutura do php.

ENTENDENDO A LÓGICA:

1 - entra no sistema, arquivo index.html:

1.0 - carrega evento CLICK;

1.0.0 - comunica back-end, função Ajax xhr.

2 - aciona click:

2.0 - preventDefault(), cancela o evento se for cancelável, sem parar a propagação do mesmo;

2.0 - cria duas variável:

2.0.0 - lnk recupera atributo data-link com valor da página a ser carregada;

2.0.1 - opcao2, outro valor qualquer, apenas para entender a proposta;

2.1 - envia ao back-end (indice.php).

3 - indice.php recebe o array via post:

3.0 - recebo e passo para uma condição switch para checar qual página foi solicitada;

3.0.0 - de acordo com o valor, a condição inclui (include) ou retorna mensagem ao front-end;

4 - função Ajax de sucesso (success) recebe o valor em retornoBackend e imprime no elemento div com id mostra-pagina.

OBS:

Existe diversas maneiras de fazer uma requisição como essa, tente entender o conceito e como funciona a comunicação XHR;

Não sei seu objetivo além de incluir as páginas... para construir um site ou sistema existe uma lógica infinita;

É isso, espero ter ajudado, boa pratica e estudos.

1
  • Perfeito @RobertCezar era exatamente isto que eu precisava entender.
    – WMomesso
    Commented 7/11/2017 às 11:09

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 .