必须通过AJAX将新顺序提交PHP并事务更新数据库sort_order字段,前端仅改DOM无效;需校验ID权限、设正确Content-Type、服务端排序查询渲染,杜绝本地状态依赖。
不支持“实时拖拽排序并立即生效”这种纯前端幻想——必须配合 AJAX 提交新顺序,PHP 才能持久化更新数组索引。
拖拽排序靠 JavaScript,但顺序不会自动同步到 PHP 数组
浏览器里用 Sortable.js 或原生 DragEvent 拖动 标签,只改变 DOM 顺序,$_POST 或数据库里的图片 ID 顺序完全没变。用户刷新页面,一切回到原始状态。
关键点:
- 拖拽结束时,必须调用
fetch()或$.ajax()把新顺序(如[3, 1, 4, 2])发给 PHP 接口 - PHP 接收后不能直接覆盖整个数组,要按 ID 更新每张图的
sort_order字段或重排关联数组键名 - 返回成功响应,前端才可认为“已保存”,否则应提示失败并回滚 DOM
PHP 端接收排序数据时,别用 $_POST[‘ids’] 直接遍历更新
常见错误是写成:foreach ($_POST['ids'] as $i => $id) { update_image($id, $i); } —— 这看似合理,但若请求中途被拦截、ID 被篡改或重复提交,会导致序号错乱甚至越权修改他人图片。
立即学习“PHP免费学习笔记(深入)”;
安全做法:
- 传过来的
ids必须先校验:每个$id是当前用户拥有的有效图片 ID(查库确认) - 用事务包裹更新:
beginTransaction()→ 批量UPDATE image SET sort_order = ? WHERE id = ?→commit() - 避免用
array_values()重索引后直接json_encode()存进单个字段——丧失数据库查询能力,后期按顺序查图会变慢
JS 发送排序数据时,注意 Content-Type 和数据结构
如果后端用 $_POST 接收,前端必须发 application/x-www-form-urlencoded;若用 json_decode(file_get_contents('php://input')),则必须设 Content-Type: application/json,否则 PHP 拿不到数据。