form表单内容编辑，只提交已经修改的部分,未修改的部分不提交

最新推荐文章于 2025-01-13 14:07:41 发布

原创最新推荐文章于 2025-01-13 14:07:41 发布 · 2.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

71 篇文章

订阅专栏

本文介绍了一种更新接口的设计，强调了名称重复校验功能，展示了如何使用diffDataForm函数比较表单前后变化，并组装提交参数进行API请求。

更新接口做了名称重复校验，只修改状态，会校验名称重复，只能提交修改的字段和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)
  })