Loading HTML dynamically using JavaScript and PHP

I have the following code:

 <?php
 
 if ($x == 1){

 ?>
   <b>Some html...</b>
   <?php
             }
    else if ($x==2){ ?>

<b> Other html...</b>
<?php
}
?>

Now I would like to have two links below (a href) and somehow pass the variable $x (so Link1 passes x=1 and Link2 passes x=2) in order to load the relevant bit of code from if statement. I know I can pass $x using the form and then test its value and load required a bit of code, but I would like to do it smoothly, without reloading the page. I think that jQuery could help it, but I have no idea how to do it. Any ideas greatly appreciated.

Answer

Forgetting about PHP for the moment, you’re looking for jQuery’s .load():

<div id="container"></div>
<a href="javascript:void(0);" onclick="loadContent(1);">Load 1</a>
<a href="javascript:void(0);" onclick="loadContent(2);">Load 2</a>

<script type="text/javascript">
loadContent = function(content){
   $('#container').load(content + '.html');
}
</script>

The above code (not tested, but it’s at least close) will insert the contents of 1.html, or 2.html (on the server) into the div with id="container".

There are plenty of tutorials, like the one linked in pygorex1′ answer, that cover various ways of doing this.