form表单内容编辑,只提交已经修改的部分,未修改的部分不提交
程序员文章站
2022-07-15 16:45:38
...
更新接口做了名称重复校验,只修改状态,会校验名称重复,只能提交修改的字段和id 更新内容
封装对比函数
function diffDataForm(newData, oldData) {
let result = {} // 报错修改的字段内容
Object.keys(oldData).forEach(key => {
if (oldData[key] !== newData[key]) {
result[key] = newData[key]
}
})
return result
}
编辑表单时,clone一份表单数据
var formData = {
id: 1,
name: '名称'
status: 0
}
var rawData = {...formData}
// 编辑后
formData = {
id: 1,
name: '名称',
status: 1
}
// 获得修改后的数据
var diffData = diffDataForm(formData, rawData)
// 组装提交数据
var params = {
id: formData.id // id更新必传
...diffData
}
// 提交修改后的数据
fetch('https://httpbin.org/post', {
method: 'POST',
header: { 'Content-Type': 'application/json;chartset=UTF-8' },
body: JSON.stringify(params)
})
.then(resp => resp.json())
.then(res => {
// do something
console.log(res)
})
下一篇: CAT的Client端发送消息