AJAX 数据库学习笔记
什么是 AJAX？
AJAX（Asynchronous JavaScript and XML）即“异步的 JavaScript 和 XML”，是一种用于创建快速动态网页的技术。它利用 JavaScript 和 XML 与服务器进行异步通信，从而使网页能够在不刷新页面的情况下动态地展示数据。
AJAX 如何访问数据库？
AJAX 可以通过后端语言（如 PHP、Python、Java 等）与数据库进行交互，从而实现数据的增删改查。下面以 PHP 语言为例，演示如何通过 AJAX 实现对数据库的操作。
连接数据库
要使用 AJAX 访问数据库，首先需要在后端连接数据库。假设我们连接的是名为“mydb”的 MySQL 数据库，代码如下：
phpCopy Code$servername = "localhost";
$username = "yourusername";
$password = "yourpassword";
$dbname = "mydb";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
查询数据
接下来，我们可以通过 AJAX 向后端发送请求，从数据库中获取数据。以下是一个简单的示例，获取名为“customers”的表中所有客户的数据：
phpCopy Code$sql = "SELECT * FROM customers";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出每行数据
while($row = $result->fetch_assoc()) {
echo "Name: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
}
} else {
echo "0 结果";
}
插入数据
如果要向数据库中插入数据，可以通过 AJAX 向后端发送请求，并将要插入的数据作为参数传递。以下是一个简单的示例，向名为“customers”的表中插入一条新的客户数据：
phpCopy Code$name = $_GET['name'];
$email = $_GET['email'];
$sql = "INSERT INTO customers (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "新记录插入成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
更新数据
要更新数据库中的数据，可以通过 AJAX 向后端发送请求，并将要更新的数据和对应的条件作为参数传递。以下是一个简单的示例，将名为“John Smith”的客户的邮箱更新为“john.smith@example.com”：
phpCopy Code$name = 'John Smith';
$email = 'john.smith@example.com';
$sql = "UPDATE customers SET email='$email' WHERE name='$name'";
if ($conn->query($sql) === TRUE) {
echo "记录更新成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
删除数据
如果要从数据库中删除数据，可以通过 AJAX 向后端发送请求，并将要删除的数据和对应的条件作为参数传递。以下是一个简单的示例，删除名为“John Smith”的客户的数据：
phpCopy Code$name = 'John Smith';
$sql = "DELETE FROM customers WHERE name='$name'";
if ($conn->query($sql) === TRUE) {
echo "记录删除成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
实例
下面是一个使用 AJAX 访问数据库的实例，它可以从名为“customers”的表中获取所有客户的数据，并将其显示在网页上。同时，我们还可以通过表单向该表中插入新的客户数据。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>AJAX 数据库实例</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>所有客户</h1>
<div id="customers"></div>
<br>
<h1>添加客户</h1>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">邮箱：</label>
<input type="text" id="email" name="email">
<br><br>
<input type="button" value="添加" onclick="addCustomer()">
</form>
<script>
// 获取所有客户
$.get("get_customers.php", function(data, status){
$("#customers").html(data);
});
// 添加客户
function addCustomer() {
var name = $("#name").val();
var email = $("#email").val();
$.get("add_customer.php?name=" + name + "&email=" + email, function(data, status){
alert(data);
});
}
</script>
</body>
</html>
其中，get_customers.php 文件用于获取所有客户的数据，代码如下：
phpCopy Code$sql = "SELECT * FROM customers";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出每行数据
while($row = $result->fetch_assoc()) {
echo "Name: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
}
} else {
echo "0 结果";
}
add_customer.php 文件用于向“customers”表中插入新的客户数据，代码如下：
phpCopy Code$name = $_GET['name'];
$email = $_GET['email'];
$sql = "INSERT INTO customers (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "新记录插入成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
以上就是一个简单的使用 AJAX 访问数据库的实例。