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

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

程序员文章站 2022-07-07 19:38:35
在工作中我们会遇到这样的需求,就是在内容编辑的时候提供修改内容的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

上一篇： 海创软件组--20200712-HTML+CSS3雪碧图

下一篇： 课时25.a标签基本使用（掌握）

推荐阅读