欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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)
  })