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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值