AJAX传递数组参数方式及后端Springmvc接收方式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cccmercy/article/details/81585906

传递的数组中的元素不是对象

方式一：遍历数组，把数组中的元素拼接为请求字符串
前端发送请求：

var checkedItem = [1533799438815, 1533806803574, 1533806973625, 1533807374669];
var queryStr = '_method=delete';
$.each(checkedItem,function(idx,item){
    queryStr += '&nodeId='+item;
});
$.ajax({
    type:'post',
    data:queryStr,// 核心
    dataType:'json',
    url:'${ctp}/ClusterSetup/Nodes',
    success:function(data){
        console.log(data);
    }
});

后端接收请求：

@RequestMapping(value="/Nodes",method=RequestMethod.DELETE)
@ResponseBody
public Message batchDeleteNode(@RequestParam("nodeId")List<Long> nodeIds) {
    System.out.println(nodeIds);
    return new Message(null, "success");
}

方式二：把数组作为对象的一个属性
前端发送请求：

checkedItem = [1533799438815, 1533806803574, 1533806973625, 1533807374669];
$.ajax({
    type:'post',
    data:{_method:'delete',nodeIds:checkedItem},// 核心
    dataType:'json',
    url:'${ctp}/ClusterSetup/Nodes',
    success:function(data){
        console.log(data);
    }
});

这种方式最终会把对象中属性拼接为请求字符串，但是对数组参数会做特别处理。类似于手动拼接，只不过参数的键是 属性名+[]。上面最终的请求字符串是这样的：_method=delete&nodeIds[]=1533799438815&nodeIds[]=1533806803574&nodeIds[]=1533806973625&nodeIds[]=1533807374669

后端接收请求：

@RequestMapping(value="/Nodes",method=RequestMethod.DELETE)
@ResponseBody
public Message batchDeleteNode(@RequestParam("nodeIds[]")List<Long> nodeIds) {
    System.out.println(nodeIds);
    return new Message(null, "success");
}

传递的数组中的元素是对象

这种情况下，核心就是把数组参数转换为json字符串。
前端发送请求：

var checkedItem = [
    {nodeId:111,nodeName:'a',ip:'127.0.0.1',port:6688,targetDb:'SYSTEM',setupPath:'/opt/server6_1',username:'SYSDBA',password:'SYSDBA',alive:true,monitor:null},
    {nodeId:222,nodeName:'b',ip:'127.0.0.1',port:6689,targetDb:'SYSTEM',setupPath:'/opt/server6_2',username:'SYSDBA',password:'SYSDBA',alive:true,monitor:null},
    {nodeId:333,nodeName:'c',ip:'127.0.0.1',port:6690,targetDb:'SYSTEM',setupPath:'/opt/server6_3',username:'SYSDBA',password:'SYSDBA',alive:false,monitor:null},
    {nodeId:444,nodeName:'d',ip:'127.0.0.1',port:6691,targetDb:'SYSTEM',setupPath:'/opt/server6_4',username:'SYSDBA',password:'SYSDBA',alive:true,monitor:null}
];
$.ajax({
    type:'delete',
    data:JSON.stringify({clusterId:clusterId, nodeIds:checkedItem}),// 核心
    contentType:'application/json;charset=UTF-8',// 核心
    dataType:'json',
    url:'${ctp}/ClusterSetup/Nodes',
    success:function(data){
        console.log(data);
    }
});

这里需要注意：
1. 把请求参数转换为json字符串
2. 设置contentType为application/json;charset=UTF-8
3. 上面的例子中，还需要传递其他参数，所以并不是仅仅把数组参数转换为json字符串。需要把其他参数和数组参数封装为一个JS对象，然后转换为json字符串，下面后端接收时也要做特殊处理

后端接收请求：

1. 需要使用写一个数据模型类，用来接收参数。这个数据模型类需要与封装了参数的JS对象一致。这里的一致指：属性名要与参数名一致，属性类型要可以封装存放与参数名对应的数据。若不想用数据模型接收，也可使用Map<String,Object> params接收，只不过这种参数的类型可能无法正确转型
2. 使用@RequestBody注解，它将传递过来的json字符串转换为JavaBean

@RequestMapping(value="/Nodes",method=RequestMethod.DELETE)
@ResponseBody
public Message batchDeleteNodeTest(@RequestBody DataModel dm) {
    System.out.println(dm);
    return new Message(null, "success");
}

数据模型类 DataModel.java

import java.util.List;

public class DataModel {

    private Long clusterId;
    private List<Node> nodeIds;

    public DataModel() {
        super();
    }

    public DataModel(Long clusterId, List<Node> nodeIds) {
        super();
        this.clusterId = clusterId;
        this.nodeIds = nodeIds;
    }

    public Long getClusterId() {
        return clusterId;
    }

    public void setClusterId(Long clusterId) {
        this.clusterId = clusterId;
    }

    public List<Node> getNodeIds() {
        return nodeIds;
    }

    public void setNodeIds(List<Node> nodeIds) {
        this.nodeIds = nodeIds;
    }

    @Override
    public String toString() {
        return "DataModel [clusterId=" + clusterId + ", nodeIds=" + nodeIds + "]";
    }

}

节点类Node.java

public class Node {

    private Long nodeId;
    private String nodeName;
    private String ip;
    private Integer port;
    private String targetDb;
    private String setupPath;
    private String username;
    private String password;
    private Boolean alive;
    private Boolean monitored;

    public Node() {
        super();
    }

    public Node(Long nodeId, String nodeName, String ip, Integer port, String targetDb, String setupPath,
            String username, String password) {
        super();
        this.nodeId = nodeId;
        this.nodeName = nodeName;
        this.ip = ip;
        this.port = port;
        this.targetDb = targetDb;
        this.setupPath = setupPath;
        this.username = username;
        this.password = password;
    }

    public Long getNodeId() {
        return nodeId;
    }

    public void setNodeId(Long nodeId) {
        this.nodeId = nodeId;
    }

    public String getNodeName() {
        return nodeName;
    }

    public void setNodeName(String nodeName) {
        this.nodeName = nodeName;
    }

    public Integer getPort() {
        return port;
    }

    public void setPort(Integer port) {
        this.port = port;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getIp() {
        return ip;
    }

    public void setIp(String ip) {
        this.ip = ip;
    }

    public String getSetupPath() {
        return setupPath;
    }

    public String getTargetDb() {
        return targetDb;
    }

    public void setSetupPath(String setupPath) {
        this.setupPath = setupPath;
    }

    public void setTargetDb(String targetDb) {
        this.targetDb = targetDb;
    }

    public Boolean getAlive() {
        return alive;
    }

    public void setAlive(Boolean alive) {
        this.alive = alive;
    }

    public Boolean getMonitored() {
        return monitored;
    }

    public void setMonitored(Boolean monitored) {
        this.monitored = monitored;
    }

    @Override
    public String toString() {
        return "Node [nodeId=" + nodeId + ", nodeName=" + nodeName + ", ip=" + ip + ", port=" + port + ", targetDb="
                + targetDb + ", setupPath=" + setupPath + ", username=" + username + ", password=" + password
                + ", alive=" + alive + ", monitored=" + monitored + "]";
    }

}