How To Use Ajax To Retrieve My Data From a PHP File (Using JQuery)

Question

I am trying to use an Ajax call using JQuery on my html page to retrieve the data field 'Page' which is stored using PHP.

I would like to retrieve $Page from the input.php or alternatively $f1 from the output.php ( this is the same data). and put this data into the div id="menu" a href containers eg id="homebox".

I have made an attempt at the Ajax call but I need some advice on what parameters to put into it.

Ajax Call:

$.ajax({
type:"POST",
url:"output.php", // Or insert.php ?
data: // I am not sure what to put in here, 
success: function( data ){
alert(data);
return;
}
});

Here's my code from the three files:

insert.php:

$ID=$_POST['ID'];
$Page=$_POST['Page'];
$Description=$_POST['Description'];

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

$query = ("INSERT INTO Pages (ID, Page, Description)
VALUES 
('$ID','$Page','$Description')");

mysql_query($query);

output.php:

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM Pages";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">Page</font></th>
<th><font face="Arial, Helvetica, sans-serif">Description</font></th>
</tr>

<?php
$i=0;
while ($i < $num) {

$f1=mysql_result($result,$i,"Page");
$f2=mysql_result($result,$i,"Description");
?>

<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
</tr>

<?php
$i++;
}
?>

index.html:

<script type="text/javascript"> 

$(document).ready(function() 
{

$('#homebox').click(function() 
{  
$('ul:first a').filter(function(i) { return $.trim($(this).text()) == '';   }).first().text('Home')
$('#headingtochange').html('Home');
$('#paragraphtochange').html('The user is currently on the Home page.');
});
});
</script>
<div id="menu">
    <ul>
      <li><a href="#" id="homebox">Home</a></li>
      <li><a href="#" id="kuwebsitebox">KU Website</a></li>
      <li><a href="#" id="studyspacebox">StudySpace</a></li>
      <li><a href="#" id="osisbox">OSIS</a></li>
      <li><a href="#" id="librarybox">Library</a></li>
      <li><a href="#" id="studenthubbox">StudentHUB</a></li>
    </ul>

Answer 1

var params = {'action': 'save' , 'id':5};
$.ajax({
type:"POST",
url:"output.php", // Or insert.php ?
data: params , 
success: function( data ){
alert(data);
return;
}
});

Answer 2

You can use jQuery's load() , for example:

$('#paragraphtochange').load( 'output.php');

It also allows you to change title (as part of callback oncomplete ) with simple code as this:

<input type='hidden' name='_page_title' value='Home' />

With (in oncomplete callback):

$('#headingtochange').html( $( 'input[name=_page_title]').val()).