Include PHP, Loading page with ajax (without refresh the page)

i'm new here so i want to be more specific as possibile XD ok let's start:

i've created a template with div+css,and with php i've created a script That include a file that you call from the menu Links with "index.php?modul=modulename" this is the code:

<开发者_如何学JAVA;div id="contenuto"><br />
<?php
if(empty($_GET["modul"]) && empty($_GET['userpanel'])) {
        require('moduli/news.php');
            }
        elseif (file_exists("moduli/" . $_GET['modul'] . ".php")) {
        include("moduli/" . $_GET['modul'] . ".php");}
         elseif (file_exists("moduli/userpanel/" . $_GET['userpanel'] . ".php")) {
        include("moduli/userpanel/" . $_GET['userpanel'] . ".php");
       }else{
      include("moduli/404.php");
    }
?>
<br />
</div>

So...i would that when i click on a menu link it will include the specific module without refresh the page...sorry for my bad english xD

Let's say this is your menu links list :

<ul id="menulist">
  <li><a href="index.php?modul=mod1" rel="mod1">Module 1</a></li>
  <li><a href="index.php?modul=mod2" rel="mod2">Module 2</a></li>
  <li><a href="index.php?modul=mod3" rel="mod3">Module 3</a></li>
  <li><a href="index.php?modul=mod4" rel="mod4">Module 4</a></li>
  <li><a href="index.php?modul=mod5" rel="mod5">Module 5</a></li>
</ul>

You can achieve what you need with a simple jquery request and another "module bringer" php file :

<script>
    $(document).ready(function(){
        $('#menulist li a').click(function(e){
            e.preventDefault(); // This will prevent the link to work.
            $('#contenuto').load('module_bringer.php?mod=' +  $(this).attr('rel'););  // You get the moule from rel attribute
            // You should keep the actual link so bots can crawl.
        });
    });
</script>

Detailed Explanation Edit Below

0 - Ok. First of all you should make everything keep working without js and jquery. Bots do not crawl via a browser, they just take the source code and crawls through the code. (Assuming that you care for seo)

1 - Make an extra attribute to your menu links (in this case i've added rel attribute). The value of this attr is the module parameter value.

2 - Include jquery library (if you haven't included before - You can download it from here.

3 - You can use the second code part that i've wrote. You just need to change the triggering part. In the jquery code $('#menulist li a').click gets triggered when the explample menu items that's in the first code block. You have to change this according to your menu structure. This part is the one that makes the httprequest and puts the results into #contenuto div.

4 - You need to create another file for including the content which will be the target file of the jquery httprequest. (in this case i've named it module_bringer.php ). Contents should be like this :

<?php
    // You probably need to include some files here like db connection, class definitions etc.
?>
<br />
<?php
if(empty($_GET["modul"]) && empty($_GET['userpanel'])) {
        require('moduli/news.php');
            }
        elseif (file_exists("moduli/" . $_GET['modul'] . ".php")) {
        include("moduli/" . $_GET['modul'] . ".php");}
         elseif (file_exists("moduli/userpanel/" . $_GET['userpanel'] . ".php")) {
        include("moduli/userpanel/" . $_GET['userpanel'] . ".php");
       }else{
      include("moduli/404.php");
    }
?>
<br />

To achieve new functionality without a page refresh you will need to use ajax. I recommend using the jQuery library.

You will need to make calls to functions such as jQuery.ajax or load. Both functions take a url as the first argument which can be a PHP page.

You'll want the links to look like <a href="#" onClick="getPage(module_name)>link text</a>. Replace module_name with the module name that you want each link to get. Ajax is all about the javascript `xmlHttpRequest'.

function getPage(modul){

    // This will create the XmlHttpRequest in modern browsers
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();                   
    }
    // This will create the XmlHttpRequest in older versions of Internet Explorer
    else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    // This is how you tell the script what to do with the response from the request
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("contenuto").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "moduli.php?modul="+modul, true);
    xmlhttp.send();
}

In this example you would need another file, moduli.php to recieve the xmlhttp request and include the correct file. It might look something like this.

$modul = $_GET['modul'];

include('moduli/'.$modul.'.php');

That's the first way to do it via AJAX that comes to mind but I'm no veteran so there's probably a much easier way to do it.

Edit: Other people have responded with much simpler ways to accomplish this using jQuery so I recommend taking a look at that. The only benefit to my version is that you wouldn't have to call to include the library (even though it's simple to do).