前端HTML如何使用ajax操作数据库
核心结论
HTML 本身不能直接操作数据库
HTML 只是静态页面，没有连接 MySQL、执行 SQL 的能力。完整流程：
HTML页面（前端） → AJAX请求 → PHP后端(ThinkPHP) → PHP操作数据库 → 结果返回前端渲染
一、完整通信流程（移动端安卓页面）
1. 前端HTML：表单、按钮，用 JS（jQuery/Axios）发 GET/POST 请求给 ThinkPHP 接口
2. ThinkPHP 后端：接收参数、验证、模型执行增删改查SQL
3. MySQL数据库：读写数据
4. 后端返回 JSON 数据，前端 JS 刷新页面/更新列表
二、拆分四大操作完整代码（沿用上面TP8项目）
前置：移动端通用头部（必须加，适配安卓）
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
新增，前端HTML+js，view/user/add.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{padding:15px;background:#f4f4f4}
.form-item{margin:12px 0}
input{width:100%;padding:12px;font-size:16px;border:1px solid #ddd;border-radius:6px}
.btn{width:100%;padding:13px;background:#0066ff;color:#fff;border:none;border-radius:6px;margin-top:10px}
</style>
</head>
<body>
<div>
<div class="form-item">
<input id="username" placeholder="输入用户名">
</div>
<div class="form-item">
<input id="phone" placeholder="输入手机号">
</div>
<button class="btn" id="addBtn">提交新增</button>
</div>
<script>
// 新增：POST请求传给TP后端
$('#addBtn').click(function(){
let uname = $('#username').val();
let phone = $('#phone').val();
$.post("/user/add",{username:uname,phone:phone},function(res){
if(res.code === 1){
alert("新增成功");
location.href = "/user/list.html"; // 跳列表页
}
})
})
</script>
</body>
</html>
查询代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{padding:12px;background:#f4f4f4}
.add-link{display:block;padding:12px;background:#28a745;color:#fff;text-align:center;border-radius:6px;text-decoration:none;margin-bottom:15px}
.user-card{background:#fff;padding:15px;border-radius:8px;margin-bottom:10px}
.operate a{margin-right:15px;color:#0066ff}
</style>
</head>
<body>
<a href="/user/add" class="add-link">添加用户</a>
<div id="userList"></div>
<script>
// 查询：GET请求获取全部用户数据
$(function(){
$.get("/user/index",function(data){
let html = "";
data.forEach(item=>{
html += `
<div class="user-card">
<p>ID：${item.id}</p>
<p>姓名：${item.username}</p>
<p>手机：${item.phone}</p>
<div class="operate" style="margin-top:8px">
<a href="/user/edit?id=${item.id}">编辑</a>
<a href="javascript:delUser(${item.id})">删除</a>
</div>
</div>
`
})
$('#userList').html(html);
})
})
</script>
</body>
</html>
修改代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{padding:15px;background:#f4f4f4}
.form-item{margin:12px 0}
input{width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:16px}
.btn{width:100%;padding:13px;background:#0066ff;color:#fff;border:none;border-radius:6px}
</style>
</head>
<body>
<input type="hidden" id="uid" value="{$info.id}">
<div class="form-item">
<input id="username" value="{$info.username}">
</div>
<div class="form-item">
<input id="phone" value="{$info.phone}">
</div>
<button class="btn" id="editBtn">保存修改</button>
<script>
$('#editBtn').click(function(){
let id = $('#uid').val();
let uname = $('#username').val();
let phone = $('#phone').val();
// 带id提交post更新
$.post("/user/edit?id="+id,{username:uname,phone:phone},function(res){
if(res.code===1){
alert("修改成功");
location.href="/user/list.html";
}
})
})
</script>
</body>
</html>
删除代码如下：
function delUser(id){
if(!confirm("确定删除这条数据？")) return;
$.get("/user/del?id="+id,function(){
location.reload(); // 删除成功刷新列表
})
}
后端： User::destroy($id) 删除数据库数据
三、关键知识点
1. HTML 职责：展示界面、收集用户输入、触发AJAX请求
2. PHP/ThinkPHP职责：接口服务、权限校验、操作数据库、返回JSON
3. 绝对不能：前端直接写MySQL账号密码、前端执行SQL（极度危险，会被泄露、删库）
4. 安卓适配关键点： viewport 标签，宽度100%布局，禁止固定px宽度
四、请求链路总结
- 增：JS POST → /user/add → TP插入SQL
- 查：JS GET → /user/index → TP查询SQL
- 改：JS POST → /user/edit → TP更新SQL
- 删：JS GET → /user/del → TP删除SQL
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)