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

最新推荐文章于 2022-11-16 18:54:28 发布

搬砖的赵某某

最新推荐文章于 2022-11-16 18:54:28 发布

阅读量3.5k

点赞数 1

文章标签： jquery vue.js es6 html5 html

本文链接：https://blog.csdn.net/zhaoletf/article/details/107244640

版权

在工作中我们会遇到这样的需求,就是在内容编辑的时候提供修改内容的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>

如果这篇文章对您有所帮助,请帮忙点一个小小的赞,如果大家有更好的解决方法或者有任何疑问都可以私信我,

搬砖的赵某某

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
form表单内容编辑时只提交已经修改的部分,未修改的部分不提交

在工作中我们会遇到这样的需求,就是在内容编辑的时候提供修改内容的log日志,这个时候就需要我们在提交的时候,只提交内容修改的部分,而不修改的部分不需要提交.这样其实很简单,就是需要我把原始的数据放到一个数组或者对象里面,(这里需要注意一点,就是不要直接用等于 = , 这样会把原始数据浅拷贝到你存储的数组或对象里面,可能存在你编辑了内容之后,你存贮的原始数据也会被修改,这个时候你需要深拷贝数据就可以了).然后在通过for循环遍历对比即可.<!DOCTYPE html><html lang
复制链接

扫一扫