thinkphp8前端开发HTML和ajax
ThinkPHP8 + HTML + Fetch (Ajax)
环境说明
1. ThinkPHP8 项目已装好，数据库 student，表 user（沿用上面 SQL）
2. 架构：
- 模型：app/model/User.php
- 控制器：app/controller/User.php（接口 CRUD）
- 前端视图：view/user/index.html（Ajax 页面）
3. 数据库配置：config/database.php 自行修改账号密码
1、数据库表 SQL（不变）
CREATE DATABASE IF NOT EXISTS student;
USE student;
CREATE TABLE IF NOT EXISTS `user` (
id INT PRIMARY KEY AUTO_INCREMENT COMMENT '主键',
name VARCHAR(50) NOT NULL COMMENT '姓名',
age INT COMMENT '年龄',
phone VARCHAR(20) COMMENT '手机号'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2、模型 app/model/User.php
<?php
namespace app\model;
use think\Model;
class User extends Model
{
protected $table = 'user';
protected $autoWriteTimestamp = false;
}
3、控制器 app/controller/User.php（CRUD 接口）
<?php
namespace app\controller;
use app\model\User;
use think\Request;
use think\Response;
class User
{
// 渲染前端页面
public function index()
{
return view();
}
// 1、查询列表 GET /user/list
public function list()
{
$list = User::order('id desc')->select();
return json([
'code' => 200,
'data' => $list
]);
}
// 2、新增 POST /user/add
public function add(Request $request)
{
$data = $request->post();
$res = User::create($data);
if ($res) {
return json(['code' => 200, 'msg' => '新增成功']);
}
return json(['code' => 500, 'msg' => '新增失败']);
}
// 3、单条回显 GET /user/edit?id=1
public function edit(Request $request)
{
$id = $request->get('id');
$info = User::find($id);
return json([
'code' => 200,
'data' => $info
]);
}
// 4、更新修改 POST /user/update
public function update(Request $request)
{
$data = $request->post();
$res = User::update($data, ['id' => $data['id']]);
if ($res) {
return json(['code' => 200, 'msg' => '修改成功']);
}
return json(['code' => 500, 'msg' => '修改失败']);
}
// 5、删除 GET /user/del?id=1
public function del(Request $request)
{
$id = $request->get('id');
User::destroy($id);
return json(['code' => 200, 'msg' => '删除成功']);
}
}
4、路由配置 route/app.php
<?php
use think\facade\Route;
// 页面
Route::get('user', 'User/index');
// 接口
Route::get('user/list', 'User/list');
Route::post('user/add', 'User/add');
Route::get('user/edit', 'User/edit');
Route::post('user/update', 'User/update');
Route::get('user/del', 'User/del');
5、前端模板 view/user/index.html（Ajax 页面，原生 fetch）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TP8 Ajax CRUD</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
<h2>TP8 用户管理 Ajax增删改查</h2>
<button class="btn btn-primary my-3" data-bs-toggle="modal" data-bs-target="#addModal">添加用户</button>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<!-- 新增弹窗 -->
<div class="modal fade" id="addModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5>新增用户</h5></div>
<div class="modal-body">
<input class="form-control mb-2" id="addName" placeholder="姓名">
<input class="form-control mb-2" id="addAge" placeholder="年龄">
<input class="form-control mb-2" id="addPhone" placeholder="手机号">
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button class="btn btn-success" onclick="addData()">提交新增</button>
</div>
</div>
</div>
</div>
<!-- 编辑弹窗 -->
<div class="modal fade" id="editModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5>编辑用户</h5></div>
<div class="modal-body">
<input type="hidden" id="editId">
<input class="form-control mb-2" id="editName" placeholder="姓名">
<input class="form-control mb-2" id="editAge" placeholder="年龄">
<input class="form-control mb-2" id="editPhone" placeholder="手机号">
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button class="btn btn-warning" onclick="updateData()">保存修改</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 页面加载自动加载列表
window.onload = getList();
// 1、查询所有
async function getList() {
const res = await fetch("/user/list");
const json = await res.json();
const tbody = document.getElementById("tableBody");
tbody.innerHTML = "";
json.data.forEach(item => {
tbody.innerHTML += `
<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.phone}</td>
<td>
<button class="btn btn-sm btn-warning" onclick="openEdit(${item.id})">编辑</button>
<button class="btn btn-sm btn-danger" onclick="del(${item.id})">删除</button>
</td>
</tr>
`
})
}
// 2、新增
async function addData() {
const formData = new FormData();
formData.append("name", document.getElementById("addName").value);
formData.append("age", document.getElementById("addAge").value);
formData.append("phone", document.getElementById("addPhone").value);
const res = await fetch("/user/add", {
method: "POST",
body: formData
});
const json = await res.json();
alert(json.msg);
bootstrap.Modal.getInstance(document.getElementById("addModal")).hide();
// 清空输入框
document.getElementById("addName").value = "";
document.getElementById("addAge").value = "";
document.getElementById("addPhone").value = "";
getList();
}
// 打开编辑弹窗回显
async function openEdit(id) {
const res = await fetch(`/user/edit?id=${id}`);
const json = await res.json();
document.getElementById("editId").value = json.data.id;
document.getElementById("editName").value = json.data.name;
document.getElementById("editAge").value = json.data.age;
document.getElementById("editPhone").value = json.data.phone;
new bootstrap.Modal(document.getElementById("editModal")).show();
}
// 3、修改更新
async function updateData() {
const formData = new FormData();
formData.append("id", document.getElementById("editId").value);
formData.append("name", document.getElementById("editName").value);
formData.append("age", document.getElementById("editAge").value);
formData.append("phone", document.getElementById("editPhone").value);
const res = await fetch("/user/update", {
method: "POST",
body: formData
});
const json = await res.json();
alert(json.msg);
bootstrap.Modal.getInstance(document.getElementById("editModal")).hide();
getList();
}
// 4、删除
async function del(id) {
if (!confirm("确定删除？")) return;
const res = await fetch(`/user/del?id=${id}`);
const json = await res.json();
alert(json.msg);
getList();
}
</script>
</body>
</html>
更多推荐
4
0- 0
已为社区贡献10条内容
所有评论(0)