首页  >  文章  >  数据库  >  如何使用 JavaScript 和 AJAX 更新网页内容而不刷新?

如何使用 JavaScript 和 AJAX 更新网页内容而不刷新?

Susan Sarandon
Susan Sarandon原创
2024-11-23 14:11:20850浏览

How Can I Update a Web Page's Content Without Refreshing Using JavaScript and AJAX?

使用Javascript和AJAX实现不刷新页面内容更新

使用Javascript和AJAX可以实现不刷新页面更新div内容的功能JavaScript 和 AJAX。具体方法如下:

由于 onclick 处理程序是在浏览器中执行的,因此无法直接调用 PHP 函数。相反,添加一个使用 AJAX 从 PHP 脚本获取数据的 JavaScript 函数。使用 jQuery,您可以使用以下代码:

function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

创建一个单独的 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'];
}

In HTML,更新您的链接以利用 JavaScript 函数:

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

<div>

通过单击这些链接,div 的内容(带有 id 'myStyle')将在不重新加载页面的情况下更新。 jQuery 函数会通过 AJAX 动态加载 PHP 脚本中的数据,确保用户无需等待页面刷新即可看到更新的信息。

以上是如何使用 JavaScript 和 AJAX 更新网页内容而不刷新?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn