企业官网建设流程全解析

前言
后台管理系统开发里有一个高频场景：新增数据 和 编辑数据共用一套弹窗表单。
如果新增、编辑分别写两个弹窗，会造成大量重复 HTML、重复表单重置、重复提交逻辑，维护起来非常麻烦。
行业通用最优方案：只写 1 个弹窗，通过 JS 动态修改弹窗标题、区分是新增模式还是编辑模式。
下面结合 jQuery 实战代码完整讲解整套实现思路。
一、核心原理
HTML 只维护一个弹窗表单，新增、编辑共用；
定义一个全局变量用来标记当前操作类型（或者存储当前编辑 ID）；
点击【新增】：标题设置为新增，清空表单内容；
点击【编辑】：标题设置为编辑，根据 id 请求接口回显数据；
提交表单时，根据标记判断调用新增接口 / 更新接口。
二、HTML 基础结构
html
预览

+ 新增

三、完整 JS 代码 javascript 运行 // 全局变量，标记当前编辑id；值为空 = 新增，有值 = 编辑 let currentEditId = null;

// 【新增按钮点击事件】
$(“.btn-add”).click(function () {
// 切换弹窗标题为【新增】
$(“.form_title”).text(‘新增’);
// 清空编辑标记
currentEditId = null;
// 清空表单所有输入框数据
$(“.input-name”).val(‘’);
// 展示弹窗
$(“.form_pop”).show();
});

// 【编辑按钮事件委托】（列表动态渲染元素必须用事件委托！重点！）
$(“#tableBody”).on(‘click’, ‘.btn-edit’, function () {
// 获取当前行绑定的data-id
currentEditId = $(this).data(‘id’);
// 切换弹窗标题为【编辑】
$(“.form_title”).text(‘编辑’);
// 请求接口，根据ID获取详情，回填表单
.get(‘/api/getInfo?id=.get(`/api/getInfo?id=.get(‘/api/getInfo?id={currentEditId}`, function (res) {
// 数据回显
$(“.input-name”).val(res.data.name);
})
// 打开弹窗
$(“.form_pop”).show();
});

// 关闭弹窗
$(“.btn-close”).click(function () {
$(“.form_pop”).hide();
});

// 【保存提交逻辑】区分新增/编辑
$(“.btn-save”).click(function () {
let formData = {
name: $(“.input-name”).val()
}
if (currentEditId) {
// 编辑模式：携带id调用更新接口
formData.id = currentEditId;
$.post(‘/api/update’, formData, function () {
$(“.form_pop”).hide();
getList(); // 刷新列表
})
} else {
// 新增模式
$.post(‘/api/add’, formData, function () {
$(“.form_pop”).hide();
getList(); // 刷新列表
})
}
})
四、重点代码解析

1. $(“.form_title”).text(‘文字’)
   .text() 方法作用：设置元素内部纯文本，覆盖原有内容。
   javascript
   运行
   // 打开新增弹窗 → 标题改为新增
   $(“.form_title”).text(‘新增’);

// 打开编辑弹窗 → 标题改为编辑
$(“.form_title”).text(‘编辑’);
💡区分小知识点：
.text()：只操作文本，不会识别 html 标签；
.html()：可以识别 HTML 标签。单纯修改标题文字优先使用.text()。
2. 为什么编辑按钮要用事件委托 on()？
你的列表是JS 循环动态拼接渲染出来的.btn-edit按钮。
页面初始加载时按钮还不存在，如果直接写 $(“.btn-edit”).click()，绑定会失效！
正确写法：给页面一直存在的父容器#tableBody绑定事件，也就是事件委托：
javascript
运行
$(“#tableBody”).on(‘click’,‘.btn-edit’,function(){})
3. 全局标记 currentEditId 的作用
null / undefined → 当前是新增
存有数字 id → 当前是编辑
提交的时候通过这个变量判断请求哪一个后端接口。
五、开发避坑指南
打开编辑弹窗前不要忘记清空表单！
上次编辑的数据会残留在输入框，打开新增弹窗会显示旧数据。
弹窗打开逻辑统一：.show()，关闭统一.hide()；
图片、下拉选择框等复杂组件，新增编辑也要做好重置与回显；
如果有表单校验，新增和编辑共用同一套校验规则，减少重复代码；
不要写两套弹窗 DOM，极易出现样式不统一、修改需要改两处的问题。
六、完整工作流程总结
HTML：只写一套弹窗，预留标题容器.form_title
声明全局变量区分新增 / 编辑状态
新增点击：标题 = 新增 → 清空表单 → 打开弹窗
编辑点击：标题 = 编辑 → 根据 id 查询详情回填表单 → 打开弹窗
保存按钮：判断全局变量，分别执行新增请求 / 编辑请求
操作成功关闭弹窗，重新调用getList()刷新列表
拓展优化建议
你可以封装一个打开弹窗公共函数，简化代码：
javascript
运行
// 封装公共打开弹窗方法
function openPopup(title) {
$(“.form_title”).text(title);
$(“.form_pop”).show();
}

// 使用
// 新增
openPopup(‘新增’);
// 编辑
openPopup(‘编辑’);