js构建form表单数据

背景

后端接口:参数为PersonPerson成员变量包含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;
}

接口文档

参数
name
age
other.name
other.add

前端解释说: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";
    
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在使用JavaScript提交单时,我们需要使用form的submit()方法来触发单的提交事件。传递参数的方法有多种。 1. GET方式传递参数:在form标签的action属性中设置要提交到的URL,并将参数直接附加在URL后面。例如: ```html <form id="myForm" action="http://example.com/myPage?param1=value1&param2=value2" method="GET"> <!-- 单内容 --> </form> ``` 在提交单时,浏览器会将单的数据与URL中的参数一起发送给服务器。 2. 使用JavaScript动态构建URL参数:可以使用JavaScript来动态构建URL参数,并通过设置form的action属性来传递参数。例如: ```html <form id="myForm" action="http://example.com/myPage" method="GET"> <!-- 单内容 --> </form> <script> var form = document.getElementById("myForm"); form.action = "http://example.com/myPage?param1=" + encodeURIComponent(value1) + "&param2=" + encodeURIComponent(value2); form.submit(); </script> ``` 在JavaScript中,我们可以使用encodeURIComponent()函数将参数值进行编码,以确保在URL中正确传递参数。 3. 使用POST方式传递参数:如果希望将参数作为请求的体部分发送,可以将单的method属性设置为POST,并使用JavaScript来动态构建单数据。例如: ```html <form id="myForm" action="http://example.com/myPage" method="POST"> <!-- 单内容 --> </form> <script> var form = document.getElementById("myForm"); var formData = new FormData(form); formData.append("param1", value1); formData.append("param2", value2); var xhr = new XMLHttpRequest(); xhr.open("POST", form.action); xhr.send(formData); </script> ``` 在这种方法中,我们使用了FormData对象来存储单数据,并使用XMLHttpRequest发送POST请求。通过append()方法,我们可以将额外的参数添加到formData对象中。 需要注意的是,使用这种方式传递的参数不会出现在URL中,而是作为请求的主体部分发送给服务器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值