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变量的内容而不刷新页面...以便用户可以看到新数据，之后如果执行某些查询，则针对新变量进行操作。

注：我知道这需要一些 AJAX，但我不知道 AJAX...所以请回复一个我能够学习的方法...我的知识仅限于 HTML、PHP、一些 JavaScript 和一些 jQuery。

- Moon

Answer 1

你的想法是正确的，这里是如何继续进行： 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'];
  }
?>

- casablanca

---

我可以使用 $id = $_POST['id']; 而不是 $id = $_GET['id'];吗？ - Moon

除了 'jQuery.js' 之外，不需要包含任何其他库。 - Moon

如果我已经在PHP中准备好了内容，是否有一种方法可以在没有JavaScript/jQuery的情况下完成这个任务？ - MoralCode

你很棒。感谢你发布这个。 - Amit Verma

Answer 2

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

- Sorantis