1. HTML代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
备忘录</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>
备忘录</h2>
<form>
<label>标题：</label>
<input type="text" id="title"><br><br>
<label>内容：</label>
<textarea id="content"></textarea><br><br>
<input type="button" value="添加
备忘录" onclick="addMemo()">
</form>
<hr>
<h3>
备忘录列表</h3>
<ul id="memoList">
</ul>
<script src="memo.js"></script>
</body>
</html>
```
2. JavaScript代码
```javascript
// 添加
备忘录
function addMemo() {
var title = $("#title").val();
var content = $("#content").val();
$.
ajax({
type: "POST",
url: "add_memo.php", // 处理新增
备忘录的PHP文件
data: {title: title, content: content},
dataType: "json",
success: function(data){
if(data.status == "success"){
alert("添加成功！");
$("#title").val("");
$("#content").val("");
getMemoList(); // 添加成功后，重新获取
备忘录列表
}else{
alert("添加失败！");
}
}
});
}
// 获取
备忘录列表
function getMemoList() {
$.
ajax({
type: "GET",
url: "memo_list.php", // 处理获取
备忘录列表的PHP文件
dataType: "json",
success: function(data){
if(data.status == "success"){
var memoListHtml = "";
for(var i=0; i<data.memoList.length; i++){
memoListHtml += "<li><h4>"+data.memoList[i].title+"</h4><p>"+data.memoList[i].content+"</p></li>";
}
$("#memoList").html(memoListHtml);
}else{
alert("获取
备忘录列表失败！");
}
}
});
}
$(function(){
getMemoList(); // 页面加载时获取
备忘录列表
});
```
3. PHP代码（add_memo.php）
```php
<?php
header('Content-Type: application/json; charset=utf-8');
// 获取POST数据
$title = $_POST["title"];
$content = $_POST["content"];
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "memo";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// SQL语句
$sql = "INSERT INTO memo (title, content) VALUES ('$title', '$content')";
if ($conn->query($sql) === TRUE) {
$result = array("status"=>"success");
} else {
$result = array("status"=>"fail");
}
$conn->close();
echo json_encode($result);
?>
```
4. PHP代码（memo_list.php）
```php
<?php
header('Content-Type: application/json; charset=utf-8');
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "memo";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// SQL语句
$sql = "SELECT * FROM memo ORDER BY id DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$memoList = array();
while($row = $result->fetch_assoc()) {
$memo = array(
"title"=>$row["title"],
"content"=>$row["content"]
);
array_push($memoList, $memo);
}
$result = array("status"=>"success", "memoList"=>$memoList);
} else {
$result = array("status"=>"fail");
}
$conn->close();
echo json_encode($result);
?>
```
扫一扫
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
