ajax收参的四种方式

我先把静态页面粘出来

<div>
    <input type="button" value="第一种 k-v 结构的ajax 传递" id="ajax01"><br>
    <input type="button" value="第一种 k-v 结构的ajax 传递" id="ajax02"><br>
    <input type="button" value="第一种 k-v 结构的ajax 传递" id="ajax03"><br>
    <input type="button" value="第一种 k-v 结构的ajax 传递" id="ajax04"><br>
div>

1.ajax的k-v收参数

点击id为“ajax01”的按钮，触发ajax

$(function () {
    $("#ajax01").click(function () {
        $.ajax({
           url:'/ajax/reg',
           type:'post',
           data:{
               'username':"admin",
               'password':"123",
               'passwordConf':"1234"
           } ,
            success:function(res){
                console.log(res);
            },
            dataType:'json',
        });
    });
})

后端 AjaxController 代码：

//第一种 ajax的k-v收参数
@RequestMapping("/reg")
@ResponseBody //该注解是返回json数据给前端！！！也叫接口
public Map reg(String username, String password, String passwordConf) {
    Map map = new HashMap();
    //模拟一下业务
    //如果两个密码不一致，就提示
    if (StringUtils.equals(passwordConf, password)) {
        map.put("code", 0);
        map.put("msg", "注测成功");
        map.put("data", username);
        return map;
    } else {
        map.put("code", 5001);
        map.put("msg", "两个密码不一致");
        return map;
    }
}

2.ajax的对象收参数

创建 UserInfo 对象

package com.xiexin.bean;

import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;
import java.util.List;

@Data
public class UserInfo {
    private String username;
    private String password;
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date userDate;
    
}

前端：

$(function () {
    $("#ajax02").click(function () {
        var userInfo = {};
        userInfo.username = "张三";
        userInfo.password = "123";
        userInfo.passwordConf = "1234";
        userInfo.userDate = "2021-10-10 10:10:03";
        $.ajax({
            url:'/ajax/reg1',
            type:'post',
            data:userInfo,
            success:function(res){
                console.log(res);
            },
            dataType:'json',
        });
    });
})

后端：

@ResponseBody
@RequestMapping("/reg1")
public Map reg1(UserInfo userInfo) {
    Map map = new HashMap();
    map.put("code", 0);
    map.put("msg", "登录成功");
    map.put("data", userInfo);
    return map;
}

3.ajax的接受数组参数

我们在UserInfo中添加一个String类型的数组

package com.xiexin.bean;

import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;
import java.util.List;

@Data
public class UserInfo {
    private String username;
    private String password;
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date userDate;
    private String[] hobby; //爱好
}

前端：

$("#ajax03").click(function () {
    var array = new Array();
    array.push("吸烟");
    array.push("喝酒");
    array.push("烫头");
    $.ajax({
        url: '/ajax/reg2',
        type: 'post',
        data: {
            'hobbyList':array
        },
        success: function (res) {
            console.log(res);
        },
        dataType: 'json',
    });
});

后端代码：

@ResponseBody
@RequestMapping("/reg2")
//RequestParam 可以解决前后端参数不一致的问题
public Map reg2(@RequestParam("hobbyList[]") List hobbyList) {
    Map map = new HashMap();
    map.put("code", 0);
    map.put("msg", "登录成功");
    map.put("data", hobbyList);
    return map;
}

这里要注意啦，前端传参数是是 hobbyList[] ,所以我们一般加上 @RequestParam("hobbyList[]") 来解决前后端参数不一致的问题

4.ajax接受复杂类型参数（重点！！！）

在UserInfo中添加对象数组，loverList

package com.xiexin.bean;

import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;
import java.util.List;

@Data
public class UserInfo {
    private String username;
    private String password;
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date userDate;
    private List loverList; //情人
    private String[] hobby; //爱好
}

再创建Lover的JavaBean

package com.xiexin.bean;

import lombok.Data;

@Data
public class Lover {
    private String name;
    private int age;
}

前端代码：

$("#ajax04").click(function () {
    //json 传递值，他应用于复杂点数据传递
    //几乎都是json
    var userInfo = {
        username:"洋洋",
        password:"123",
        userDate:"2021-10-10",
        loverList:[
            {
                name:"冰冰",
                age:40
            },
            {
                name:"帆帆",
                age:18
            }
        ],
        hobby:[
            "吸烟","喝酒","打麻将"
        ]
    }
    $.ajax({
        url: '/ajax/reg3',
        type: 'post',
　　　　　//把浏览器的文本类型改为 json类型
        contentType:"application/json;charset=utf-8",
        data: JSON.stringify(userInfo),
        success: function (res) {
            console.log(res);
        },
        dataType: 'json',
    });
});

后端代码：

@ResponseBody
@RequestMapping("/reg3") //RequestBody 接受前端传来的json
//RequestParam 可以解决前后端参数不一致的问题
public Map reg2(@RequestBody UserInfo userInfo) {
    Map map = new HashMap();
    map.put("code", 0);
    map.put("msg", "登录成功");
    map.put("data", userInfo);
    return map;
}

重点：

1.@RequestBody:接受前端传来的json

2.@RequestParam:可以解决前后端参数不一致的问题