阿里云国际站：ajax指定div获取数据库

阿里云国际站：ajax指定div获取数据库

简介： 飞机@luotuoemo
本文由（阿里云国际站代理商：【金推云】www.jintui.cn ）撰写

如果你想在指定的div中加载数据库的数据，你可以使用AJAX技术来实现。以下是一种方法，它假设你已经有了一个服务器端脚本（例如，PHP、ASP.NET、JSP等）可以返回数据库数据：

1.首先，我们需要一个HTML div来显示数据库的数据：

<div id="myDiv"></div>

2.然后，我们使用AJAX从服务器获取数据。假设我们有一个名叫”getdata.php”的PHP脚本，它可以查询数据库并返回一个数据。

$.ajax({
   url: 'getdata.php',
   type: 'GET',
   success:function(data){
       $('#myDiv').html(data);
   }
});

在这里，我们向”getdata.php”发出了一个GET请求，并期待回复。一旦我们收到回复，我们就使用返回的数据来填充我们的div。

其中，getdata.php脚本可能是这个样子的：

<?php
$host = 'localhost';
$db   = 'test';
$user = 'root';
$pass = 'password';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$opt = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];
$pdo = new PDO($dsn, $user, $pass, $opt);

$stmt = $pdo->query('SELECT name FROM users');
while ($row = $stmt->fetch())
{
    echo $row['name'] . "<br>";
}
?>

这仅仅是一个简单的版本，你可以根据你实际的需要对其进行修改。

注意：AJAX请求的路径应与服务器的路径的相对或绝对，例如url:'/path/to/getdata.php'或url:'http://yourdomain.com/path/to/getdata.php'。

另外，本示例使用了jQuery库，这是一个强大而易用的javascript库，能够简化HTML文档遍历、事件处理、动画设计和Ajax交互。因此，你需要确保你的页面已经正确连接jQuery库。

记住，AJAX请求是异步的，这意味着它不会阻塞其他代码。因此，你需要确保你的代码已经处理好这种情况。