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 e.g. 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>

rajesh · Accepted Answer · 2012-02-09 12:47:29Z

1

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

answered Feb 9, 2012 at 12:47

rajesh

2,5231 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

thenetimp Over a year ago

or he could use a serialized string for the data, doesn't have to be a json object.

user1199649 Over a year ago

Thanks for the reply however, this only brings up a dialogue box of all the output.php code. Is there any way to select only the Page fields content ($f1)?

rajesh Over a year ago

remove alert(data) from the code. and add a div with some id="out_put" for example. then add $('#out_put').html(data); insted of alert. let me know if any issue. thanks

user1199649 Over a year ago

Thanks, that's more what I wanted, however I only want to show the $Page / $f1 value from my PHP file. Would that be done by changing the params?

rajesh Over a year ago

you can do echo json_encode(array('page' => $page, 'f1' => $f1)) from the php file. then you can use those data in the ajax call response as data.page or data.f1 thanks

|

Vyktor · Accepted Answer · 2012-02-09 12:47:27Z

0

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()).

answered Feb 9, 2012 at 12:47

Vyktor

21.1k6 gold badges69 silver badges98 bronze badges

5 Comments

user1199649 Over a year ago

Thanks for the reply, the .load() method seems to do what I want, however is there any way to only load the Page field's content without loading the whole table?

Vyktor Over a year ago

@user1199649 the easiest way would be to write $('#page').load('script/that/generates/only/page.php')

user1199649 Over a year ago

Thanks that makes sense, however if I wanted to output 1 Page value in 1 href and then the same for the next Page value. How could I select only 1 value for each href?

Vyktor Over a year ago

@user1199649 huh? Add examples what you need to do, I didn't get it. :-/

user1199649 Over a year ago

I want 1 $Page value to go into 1 href and then the next and so on: <li><a href="#" id="homebox">$firstPagevalue</a></li> <li><a href="#" id="kuwebsitebox">$secondPagevalue</a></li> The Page values are from $f1 in the output.php

Collectives™ on Stack Overflow

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

2 Answers 2

14 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related