js构建form表单数据

深藏阁楼爱情的钟 2022-12-23 03:52 259阅读 0赞

## 背景 ##

**后端接口**：参数为`Person`，`Person`成员变量包含`Other`对象

@RequestMapping("post")
    public Object post(Person person) { 
        return JsonResult.success(person);
    }
    
    public class Person implements Serializable { 
        private Other other;
        private String name;
        private Integer age;
    }
    public class Other implements Serializable { 
        private String name;
        private String add;
    }

**接口文档**：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
  </tr> 
  <tr> 
   <td>age</td> 
  </tr> 
  <tr> 
   <td>other.name</td> 
  </tr> 
  <tr> 
   <td>other.add</td> 
  </tr> 
 </tbody> 
</table>

前端解释说：`js`根本不支持“.”运算符，也就是说`js`不支持`other.name`这种格式的`key`。当时我很诧异，可能是我接口描述不够清晰？可是我已经给出例子了。前端还是个高级开发，也许我是从乡下来的，城里猿没接触过？  
这种格式的数据，我之前对接的很多前端，都认识。我直接不跟他争论，用事实说话。

## 前端js代码 ##

其实前端构建`Form`表单数据，方法有很多中。

*  前端本来就使用`form`表单创建的表格
    
        var data = $("#addForm").serialize();
 *  使用`FormData`构建表单数据
    
        var data = new FormData();
        //FormData对象加入参数
        data.append('name', 'name1');
        data.append('age', 18);
        data.append('other.name', 'name2');
        data.append('add', 'add1');
 *  手动构建表单数据
    
        var content = { };
        content['age'] = 18;
        content['name'] = 'name';
        content['other.name'] = 'other name';
        content['other.add'] = 'other add';
    
        var content = { 
            "name": "name",
            "age": 18,
            "other.name": "other name",
            "other.add": "other add"
        }
 *  手动构建表单数据（错误示例），后端会报错，`spring`会把`other`当成数组
    
        var content = { };
        content.age = 18;
        content.name = 'name';
        content.other = { };
        content.other.name = 'other name';
        content.other.add = "other add";