HTML - 更改\更新页面内容而不刷新\重新加载页面

时间:2010-09-05 01:08:02

标签: php mysql html ajax jquery

我从数据库中获取数据并将其显示在div中...我想要做的是当我点击链接时它应该更改div的内容

一个选项是通过URL将参数传递给自己并重新加载页面......

我需要这样做而不重新加载\刷新 ......

<?php   
    $id   = '1';

    function recp( $rId ) {
        $id   = $rId;
    }
?>

<a href="#" onClick="<?php recp('1') ?>" > One   </a>
<a href="#" onClick="<?php recp('2') ?>" > Two   </a>
<a href="#" onClick="<?php recp('3') ?>" > Three </a>

<div id='myStyle'>
<?php
    require ('myConnect.php');     
    $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");

    if( mysql_num_rows($results) > 0 ) {
        $row = mysql_fetch_array( $results );
        echo $row['para'];
    }
?>
</div>

目标是当我点击任何链接时,div和php变量的内容会更新而不刷新....这样用户可以看到新数据,之后如果有的话查询是在新变量\ s

上执行的

p.s我知道它需要一些AJAX,但我不知道AJAX ..所以请回复我可以学习的东西...我的知识仅限于HTML,PHP,一些JavaScript&amp;一些jQuery

2 个答案:

答案 0 :(得分:43)

你有正确的想法,所以这里是如何继续:onclick处理程序在客户端运行,在浏览器中,所以你不能直接调用PHP函数。相反,您需要添加一个JavaScript函数(如您所述)使用AJAX来调用PHP脚本并检索数据。使用jQuery,您可以执行以下操作:

<script type="text/javascript">
function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}
</script>

<a href="#" onClick="recp('1')" > One   </a>
<a href="#" onClick="recp('2')" > Two   </a>
<a href="#" onClick="recp('3')" > Three </a>

<div id='myStyle'>
</div>

然后你把你的PHP代码放到一个单独的文件中:(我在上面的例子中称它为data.php

<?php
  require ('myConnect.php');     
  $id = $_GET['id'];
  $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");   
  if( mysql_num_rows($results) > 0 )
  {
   $row = mysql_fetch_array( $results );
   echo $row['para'];
  }
?>

答案 1 :(得分:2)

jQuery将完成这项工作。 您可以使用jQuery.ajax函数(通常用于执行ajax调用)或其包装器:jQuery.get,jQuery.post用于获取/发布数据。 它非常容易使用,例如,查看this教程,该教程展示了如何在PHP中使用jQuery。