应监听show.bs.modal事件，通过event.relatedtarget获取触发按钮的data-*属性值，动态填充到模态框表单字段并清空残留数据。
Modal 打开时怎么把数据传进去并绑定到表单字段
模态框本身不带参数传递机制，得靠开发者手动把数据塞进它的 DOM 元素里。常见做法是点击触发按钮时，从按钮的 data- 属性、表格行数据或 JS 变量中读取值，再填入 Modal 内的 <input>、<select></select> 等控件。
注意别直接写死在 Modal HTML 里——那样所有弹窗都显示同一份数据。必须在 $('#myModal').modal('show') 前完成赋值。
- 推荐用
data-id、data-title这类自定义属性存原始数据，语义清晰且不影响渲染 - 如果 Modal 是复用的（比如编辑/查看共用一个），务必在每次打开前清空上一次残留的值，否则可能提交旧数据
- 对
<textarea></textarea>或富文本编辑器，不能只设value，得用.text()或对应 API（如tinymce.activeEditor.setContent()）
Ajax 提交前如何读取 Modal 里的用户输入
Modal 关闭或隐藏不会自动销毁 DOM，里面的表单字段依然存在，所以可以直接用 jQuery 或原生 document.querySelector 拿值。关键是要在点击「确认」按钮的事件里做这件事，而不是 Modal 的 hidden.bs.modal 回调里——后者时机太晚，用户可能已经关掉窗口，输入也未必保存。
示例：假设 Modal 里有个 <input id="editName"> 和一个 <button id="saveBtn"></button>
$('#saveBtn').on('click', function() {
const name = $('#editName').val().trim();
const id = $('#myModal').data('edit-id'); // 之前打开时存的
$.post('/api/update', { id, name }, function(res) {
// 处理响应
});
});
- 别漏掉
.trim()，空格容易导致后端校验失败 - 如果用了表单验证插件（如 parsley.js），确保它和 Ajax 提交逻辑不冲突——有些插件会拦截 submit 事件，但你可能用的是 button + click
- 禁用按钮防止重复提交：
$(this).prop('disabled', true)，成功/失败后记得恢复
为什么点确定后 Modal 没关闭，或者关了但没清空上次数据
这是最常被忽略的流程断点。Bootstrap Modal 不会自动重置表单，也不管你有没有发请求成功。关不关闭、清不清空，全由你代码控制。
- Ajax 成功回调里必须显式调用
$('#myModal').modal('hide')，否则 Modal 一直挂着 - 清空建议放在
shown.bs.modal事件里（每次打开前清），或在 hide 后的hidden.bs.modal里做（每次关闭后清），别混用 - 如果 Modal 里有动态加载内容（比如通过 Ajax 加载编辑表单），要监听
loaded.bs.modal（需 Bootstrap 4.3+）或自己用 Promise 控制时序，否则可能取到空值
后端接收不到参数？检查 Content-Type 和数据格式
jQuery $.post() 默认发 application/x-www-form-urlencoded，后端框架（如 Spring Boot、Django）通常能直接映射到对象或字典。但如果手动用了 JSON.stringify() 却没改 contentType，后端就收不到——因为默认不是 application/json。
- 发 JSON 时必须加：
contentType: 'application/json'，且后端要配好 JSON 解析器（如 Spring 的@RequestBody） - PHP 的
$_POST只收 form-data，收不到 raw JSON；要用json_decode(file_get_contents('php://input')) - Node.js 的 Express 需提前配置
app.use(express.json())和app.use(express.urlencoded({ extended: true }))
复杂点在于 Modal 可能包含文件上传、多级嵌套字段或开关状态（checkbox/radio），这些字段的序列化方式和后端预期要严格对齐。光传个 ID 和 name 很简单，但一加校验规则、权限判断、关联数据，就得仔细核对每个字段的命名和类型。
