当前位置：首页 > 数据库 > 正文

如何编写使用jQuery查询数据库的代码示例？

admin
数据库
2025-10-28
5

jQuery是一个流行的JavaScript库，常用于简化HTML文档遍历、事件处理、动画和Ajax交互，在处理数据库查询时，通常我们会使用Ajax来异步请求数据库中的信息，以下是一个使用jQuery进行数据库查询的基本示例，包括HTML、CSS和JavaScript代码。

HTML结构

<!DOCTYPE html> <html lang="zhCN"> <head> <meta charset="UTF8">jQuery查询数据库示例</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <button id="fetchData">查询数据</button> <div id="result"></div> <script src="query.js"></script> </body> </html>

CSS样式（可选）

#result { margintop: 20px; padding: 10px; border: 1px solid #ddd; }

JavaScript代码

$(document).ready(function() { $('#fetchData').click(function() { $.ajax({ url: 'query.php', // 服务器端处理查询的脚本 type: 'GET', // 请求方式 dataType: 'json', // 返回的数据类型 success: function(data) { var output = '<table border="1"><tr><th>ID</th><th>Name</th><th>Age</th></tr>'; $.each(data, function(key, value) { output += '<tr><td>' + value.id + '</td><td>' + value.name + '</td><td>' + value.age + '</td></tr>'; }); output += '</table>'; $('#result').html(output); }, error: function(xhr, status, error) { $('#result').html('发生错误：' + error); } }); }); });

PHP服务器端脚本（query.php）

<?php // 连接数据库 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接 if ($conn>connect_error) { die("连接失败: " . $conn>connect_error); } // 查询数据库 $sql = "SELECT id, name, age FROM users"; $result = $conn>query($sql); // 检查是否有数据 if ($result>num_rows > 0) { $data = array(); while($row = $result>fetch_assoc()) { $data[] = $row; } echo json_encode($data); } else { echo "0 结果"; } $conn>close(); ?>