练习AJAX的编程实现,在前期完成的管理信息系统界面中通过AJAX实现与数据库交互。(至少完成增加信息和查询信息的界面)
时间: 2024-02-13 10:00:10 浏览: 61
基于Java的疫情防控管理信息系统的设计与实现【附源码】
好的,下面是一个简单的AJAX编程实现,实现了通过AJAX向后台发送数据并响应后台返回的数据,实现了增加信息和查询信息的功能:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>AJAX增删改查</title>
<meta charset="utf-8">
<script>
function addInfo() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "addInfo.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("addResult").innerHTML = xhr.responseText;
}
};
xhr.send("name=" + name + "&age=" + age);
}
function searchInfo() {
var name = document.getElementById("searchName").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "searchInfo.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("searchResult").innerHTML = xhr.responseText;
}
};
xhr.send("name=" + name);
}
</script>
</head>
<body>
<h2>增加信息</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age"><br><br>
<button type="button" onclick="addInfo()">添加信息</button>
<p id="addResult"></p>
</form>
<h2>查询信息</h2>
<form>
<label for="searchName">姓名:</label>
<input type="text" id="searchName" name="searchName"><br><br>
<button type="button" onclick="searchInfo()">查询信息</button>
<p id="searchResult"></p>
</form>
</body>
</html>
```
PHP代码:
```
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 增加信息
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$age = $_POST["age"];
$sql = "INSERT INTO userinfo (name, age)
VALUES ('$name', '$age')";
if ($conn->query($sql) === TRUE) {
echo "信息添加成功!";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
// 查询信息
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$sql = "SELECT * FROM userinfo WHERE name='$name'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
echo "姓名: " . $row["name"]. " - 年龄: " . $row["age"]. "<br>";
}
} else {
echo "没有查询到匹配的信息!";
}
}
$conn->close();
?>
```
注:这只是一个简单的示例,实际使用时需要根据具体情况进行修改。同时,为了安全起见,应该对输入的数据进行过滤和验证。
阅读全文