用ajax实现备忘录新增
时间: 2024-01-01 08:04:52 浏览: 28
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);
?>
```