form表单内容编辑时 只提交已经修改的部分,未修改的部分不提交
程序员文章站
2022-03-30 09:53:07
在工作中我们会遇到这样的需求,就是在内容编辑的时候提供修改内容的log日志,这个时候就需要我们在提交的时候,只提交内容修改的部分,而不修改的部分不需要提交.这样其实很简单,就是需要我把原始的数据放到一个数组或者对象里面,(这里需要注意一点,就是不要直接用等于 = , 这样会把原始数据浅拷贝到你存储的数组或对象里面,可能存在你编辑了内容之后,你存贮的原始数据也会被修改,这个时候你需要深拷贝数据就可以了).然后在通过for循环遍历对比即可.
在工作中我们会遇到这样的需求,就是在内容编辑的时候提供修改内容的log日志,这个时候就需要我们在提交的时候,只提交内容修改的部分,而不修改的部分不需要提交.这样其实很简单,就是需要我把原始的数据放到一个数组或者对象里面,(这里需要注意一点,就是不要直接用等于 = , 这样会把原始数据浅拷贝到你存储的数组或对象里面,可能存在你编辑了内容之后,你存贮的原始数据也会被修改,这个时候你需要深拷贝数据就可以了).然后在通过for循环遍历对比即可.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// 旧数据
var oldData = {
fieldName: "wangsan",
fieldType: "number",
fieldValue: "我是字段内容",
fieldId: 345,
fieldValueIp: '1.1.1.1',
arr: {
childName: "wansan",
childIp: '3.3.1.3'
}
}
// 表单修改后的数据
var data = {
fieldName: "wangsan",
fieldType: "string",
fieldValue: "我是字段内容",
fieldId: 345,
fieldValueIp: '1.1.2.1',
arr: {
childName: "wansan",
childIp: '3.3.3.3'
}
}
var newData = {}; // 修改之后的数据
// $.each(oldData, (item, i) => {
// if (data[item] !== i) {// 对比数据,不一样的保存到 newData 中
// newData[item] = data[item]
// }
// })
Object.keys(oldData).forEach(key => {
if (oldData[key] !== data[key]){ // 对比数据,不一样的保存到 newData 中
newData[key] = data[key]
}
})
console.log(newData) //{fieldType: "string", fieldValueIp: '1.1.2.1',arr: {childName: "wansan", childIp: '3.3.3.3'}, }
</script>
</body>
</html>
如果这篇文章对您有所帮助,请帮忙点一个小小的赞,如果大家有更好的解决方法或者有任何疑问都可以私信我,
本文地址：https://blog.csdn.net/zhaoletf/article/details/107244640
上一篇： 前端如何做异步并发量的控制？