如何使用Ajax从PHP文件中检索我的数据(使用JQuery)

时间:2012-02-09 12:42:54

标签: php javascript jquery html ajax

我试图在我的html页面上使用JQuery调用Ajax来检索使用PHP存储的数据字段'Page'。

我想从input.php中检索$ Page,或者从output.php中检索$ f1(这是相同的数据)。并将此数据放入div id =“menu”中,例如href容器,例如ID = “homebox”。

我已经尝试了Ajax调用,但我需要一些关于放入哪些参数的建议。

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;
}
});

这是我的三个文件中的代码:

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>

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

您可以使用jQuery的load(),例如:

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

它还允许您使用简单的代码更改标题(作为回调oncomplete的一部分):

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

使用(在完整回调中):

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