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

Question

我从数据库中获取数据并将其显示在一个 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 的内容会在不刷新的情况下更新....以便 用户可以看到新数据，然后如果有的话在新变量上执行查询\s

ps 我知道它需要一些 AJAX，但我不知道 AJAX.. 所以请回复一些我可以学习的东西...我的知识仅限于 HTML、PHP、一些 JavaScript 和一些 jQuery

Answer 1

jQuery 将完成这项工作。 您可以使用 jQuery.ajax 函数，这是执行 ajax 调用的通用函数，也可以使用它的包装器：jQuery.get、jQuery.post 来获取/发布数据。 它非常易于使用，例如，查看this 教程，它展示了如何将 jQuery 与 PHP 一起使用。

Answer 2

您的想法是正确的，接下来是如何继续：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'];
  }
?>