Passing link to php include with jquery possible?

Question

Passing link to php include with jquery possible?

Navigation

#1 by (1 votes)

0

I have a page in php that requires header , sidebar , and footer , but content body would like to pay dynamically by passing the link to require via jquery, I do not want to work with framework since it will be a small project.

My scenario is this:

I have several links in the menu and would like to dynamically call them to load the body.

JS and HTML code

$(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><aclass="main-link" data-link="pagina.php" href="#">Página</a></li>
</ul>

file.php that loads the body of the page

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

The .php file only loads in the load and when it already has a link defined like this: include "pagina.php" of the opposite does not work.

I accept suggestions different from what I'm thinking, maybe I have to make a $_GET in the url, but I did not want to pass the url link, arquivo.php will be the container of the page and will receive many buttons and links and sometimes content of the database as tables.

php jquery ajax

asked by anonymous 06.11.2017 / 17:20

1 answer

Hide folder path with .htaccess Update Angular component 4?

score 1 · Accepted Answer

I will try to be as clear as possible not to confuse, because the issue is there in logic, I will not go into details of security or use of charset, but these issues should be addressed, come on ...

Html : markup (front-end);

Javascript & Jquery : action, events and others (using as front-end);

PHP : data management, database connections, among others (back-end).

Just a basic summary to understand how we're going to put this puzzle together ...

Step 1

Initially you will have to create the html file with the basic structure and the elements of use for the js and jquery script, example (index.html):

HOME - BASIC HTML STRUCTURE

HOME - 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();varlnk=$(this).attr('data-link'),opcao2='Meuteste';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>

END - BODY

END - BASIC HTML STRUCTURE

NOTE: Remember to put the html structure, because Stackoverflow does not allow me to put them here.

Step 2

We will create the index of the pages, example (index.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: Remember to put the php framework.

Step 3

Inclusion pages, (page_1.php or pagina_2.php):

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

OBS: Remember to put the php framework.

UNDERSTANDING THE LOGIC:

1 - enter system, index.html file:

1.0 - loads event CLICK;

1.0.0 - communicates back-end, Ajax xhr function.

2 - clicks:

2.0 - preventDefault () , cancels the event if it is cancellable, without stopping the propagation of it;

2.0 - creates two variables:

2.0.0 - lnk retrieves data-link attribute with page value to be loaded;

2.0.1 - option2, any other value, just to understand the proposal;

2.1 - sends to the backend (index.php).

3 - indice.php gets the array via post:

3.0 - I get and move to a condition switch to check which page was requested ;

3.0.0 - According to the value, the condition includes (include) or return message to the front end;

4 - successful Ajax function ( success ) receives the value in returnBackend and prints in the div element with id show-page.

OBS:

There are several ways to make a request like this, try to understand the concept and how communication works XHR ;

I do not know your purpose other than to include pages ... to build a website or system there is an infinite logic;

That's it, I hope to have helped, good practice and studies.