Spring MVC 接收参数整理(2)-接收来自Ajax的请求

来源:http://www.chinese-glasses.com 作者:Web前端 人气:97 发布时间:2020-04-15
摘要:时间: 2019-09-30阅读: 122标签: 参数前言 1.前端Ajax请求方式 开发这么多年,肯定还有不少小伙伴搞不清各种类型的参数是如何传递的,很多同学都是拿来即用,复制粘贴一把撸,遇到问题

时间: 2019-09-30阅读: 122标签: 参数前言

1.前端Ajax请求方式

开发这么多年,肯定还有不少小伙伴搞不清各种类型的参数是如何传递的,很多同学都是拿来即用,复制粘贴一把撸,遇到问题还是一脸懵逼。

(1)Ajax发送json对象

这种方式是提交的Json对象,contentType为:application/x-www-form-urlencoded,后端可以@RequestParam

var user = {
    username : "test",
    password:"test"
};
$.ajax({
    url:"/addUser.html",
    type:"POST",
    data:user,
    success:function(result) {
        console.log(result);
    }
});

姿势

(2)Ajax发送字符串(一般对于get请求,post一般不建议)

这种方式contentType为:application/x-www-form-urlencoded,后端可以@RequestParam

$.ajax({
    url:"/addUser.html",
    type:"GET",
    data:"username=test&sex=0",
    success:function(result) {
        console.log(result);
    }
});

这种方式参数一般较少,并且都是简单类型

学习参数传递的正确姿势,先说怎么做,再说为什么,本质上还是复制粘贴一把撸,问题是你想问不想问为什么!

(3)Ajax发送json字符串

发送json字符串,有三个地方需要注意,一是要指定type为json,二是要对数据JSON.stringify,三是要指定contenType为"contentType:'application/json;charset=UTF-8'

var user = {
    username : "test",
    password:"test"
};
$.ajax({
    url:"/addUser.html",
    type:"POST",
    type:"json"
    data:JSON.stringify(user),
    contentType:"application/json;charset=UTF-8",
    success:function(result) {
        console.log(result);
    }
});

传递用户登录

2.后端解析方式

前端代码:

(1)第一种方式,直接依次获取参数,这种方式需要保持和前端传入参数名称一致
@RequestMapping("/addUser.html")
public void addUser(String username, String password){

}
var param = { "username": "admin", "password": "admin"}$.ajax({ url: "/sys/login", data: param, type: "post", dataType: "json", success: function(data) { }});
(2)第二种方式,直接依次获取参数,使用@RequestParam,不要求名称一致
@RequestMapping("/addUser.html")
public void addUser(@RequestParam(value="username") String name, @RequestParam(value="username") String pwd){
}

后端代码:

(3)第三种方式,当参数比较多时,采用上述方式就比较麻烦,可以定义个pojo来处理
public class User {

    private String username;

    private String password;
}

@RequestMapping("/addUser.html")
public void addUser(User user){
}
@RestController@RequestMapping("/sys")public class LoginController { private static final Logger logger = LoggerFactory.getLogger(LoginController.class); /** * 登录 */ @PostMapping("/login") public Result login(String username, String password){ logger.info("用户登录"+username); //业务逻辑 return Result.ok("登录成功"); }}
(4)第四种方式,区别在于多一个注解@RequestBody
public class User {

    private String username;

    private String password;
}

@RequestMapping("/addUser.html")
public void addUser(@RequestBody User user){
}

当然,你也可以这么实现,@RequestParam(value="username", required=true),required默认为true,如果前台不传递此参数,后台会报错。如果设置为false,如果不传,默认为null。

(5)第五种方式,和第四种类似,使用@ModelAttribute
public class User {

    private String username;

    private String password;
}

@RequestMapping("/addUser.html")
public void addUser(@ModelAttribute User user){
}
/** * 登录 *  */@PostMapping("/login")public Result login(@RequestParam(value="username", required=true) String username, @RequestParam(value="password", required=true) String password){ logger.info("用户登录"+username); //业务逻辑 return Result.ok("登录成功");}

3.使用方式分析

总的原则:使用方式有三个维度:一是参数少且是简单类型?二是请求参数的contentType?三是是否支持不同名

后端:

  • 同名简单类型,参数少且contentType为默认contentType为:application/x-www-form-urlencoded,后端直接在方法里通过变量名获取值
  • 不同名简单类型,参数少且contentType类型为默认值,使用@RequestParam注解
  • 复合类型,contentType默认,直接使用复合类型或加上@ModelAttribute注解
  • 复合类型,contentType不是默认,使用@RequestBody
  • 未添加注解的情况下,默认简单类型调用@RequesParam处理,复杂类型使用@ModelAttribute处理
  • @RequestBody的适用情况,有些时候需要发送前端需要发送包含数组的json数据,前端采用第三种方式

前端:

  • 看参数多少和contentType来选择三种方式

用户注册

前端代码,提交方式与登录基本保持一致。

后端代码:

用一个对象来接收前台参数,一般后端有对应的实体类。

/** * 注册 *  */@PostMapping("/register")public Result register(SysUser user){ logger.info("{},用户注册",user.getUsername()); //业务逻辑 return Result.ok("注册成功");}

多参数无实体一

前端代码:

var param = { "title": "爪哇笔记", "content": "一个有趣的公众号", "author": "小柒2012"}param = JSON.stringify(param);$.ajax({ url: "/sys/multiParameter", data: param, type: "post", contentType: "application/json", dataType: "json", success: function(data) { }});

10bet,后端实现:

/** * 多参数 *  */@PostMapping("/multiParameter")public Result register(@RequestBody MapString,Object map){ logger.info("多参数传递:{},{}",map.get("title"),map.get("content")); //业务逻辑 return Result.ok("接收多参数成功");}

多参数无实体二

前端代码:

var param = { "title": "爪哇笔记", "content": "一个有趣的公众号", "author": "小柒2012"}$.ajax({ url: "/sys/multiParameter", data: param, type: "post", dataType: "json", success: function(data) { }});

后端实现:

/** * 多参数 *  */@PostMapping("/multiParameter")public Result register(@RequestParam MapString,Object map){ logger.info("多参数传递:{},{}",map.get("title"),map.get("content")); //业务逻辑 return Result.ok("接收多参数成功");}

传递数组

前端代码:

var param = { "ids": [1, 2, 3]}$.ajax({ url: "/sys/array", data: param, type: "post", dataType: "json", success: function(data) { }});

后端实现:

/** * 数组 *  */@PostMapping("array")public Result array(@RequestParam(value = "ids[]") Integer[] ids) { logger.info("数据{}", Arrays.asList(ids)); //业务逻辑 return Result.ok();}

传递集合

前端代码与传递数组保持一致。

本文由10bet发布于Web前端,转载请注明出处:Spring MVC 接收参数整理(2)-接收来自Ajax的请求

关键词:

上一篇:没有了

下一篇:nodejs实现端到端加密

频道精选

最火资讯