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

php jquery html ajax mysql

2022-08-30 12:57:06

我从DB获取数据并将其显示在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变量的内容会更新而不刷新....以便用户可以看到新数据，之后如果执行某些查询，它将在新变量上

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

答案 1

你有正确的想法，所以这是如何继续：处理程序在客户端，在浏览器中运行，所以你不能直接调用PHP函数。相反，您需要添加一个JavaScript函数（如前所述）使用AJAX来调用PHP脚本并检索数据。使用jQuery，你可以做这样的事情：onclick

<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'];
  }
?>

答案 2

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