SpringBoot ajax get/post请求案例_程序员一灯_springboot发送ajax

未知 02-07 604

本文主要是针对SpringBoot的ajax 请求、响应案例，配合适当注解，方便开发中使用，都是rest接口

$.ajax中contentType 和 dataType

contentType：设置你发送给服务器的格式

dataType：设置你收到服务器数据的格式，json/text

contentType 默认值：“application/x-www-form-urlencoded; charset=UTF-8”

JSON.stringify()：将js数据转换为json格式

GET请求/响应

基本数据类型（以int为例）

包装类型参数绑定

自定义对象类型参数绑定

List参数绑定

Map参数绑定

数组类型参数绑定

POST请求/响应

基本类型参数

json模式直接绑定自定义对象类型

json模式直接绑定自定义复合对象类型

json模式绑定数组类型

json模式绑定多个对象

1）使用List获取

2）使用Map接收

代码地址

GET请求/响应创建：DataGetRequestController @RestController public class DataGetRequestController { } 基本数据类型（以int为例）

在controller中写一个int参数绑定的方法

@GetMapping("/getInt") public int getInt(int id){ return id; }

jquery的ajax请求

$("#getInt").click(function(){ $.ajax({ type: "get", url: "/getInt?id=1000", dataType: "text",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8 success: function(data){ console.log(data) $("#getIntMsg").html(data) } }); }); 包装类型参数绑定

在controller中写多个包装类型参数绑定的方法

@GetMapping(value = "/getBox",produces = {"application/json;charset=utf-8"}) public String getBox(String name,Integer id){ return "name = " + name + " id = " + id; }

jquery的ajax请求

$("#getBox").click(function(){ $.ajax({ type: "get",//type:get type:post type:put type:delete url: "/getBox?id=1000&name=小王同学", dataType: "text",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8 success: function(data){ console.log(data) $("#getBoxMsg").html(data) } }); }); 自定义对象类型参数绑定

在controller中写自定义请求参数

@GetMapping(value = "/getUser",produces = {"application/json;charset=utf-8"}) public User getUser(User user){ return user; }

jquery的ajax请求

$("#getUser").click(function(){ $.ajax({ type: "get",//type:get type:post type:put type:delete url: "/getUser?userName=小王同学&password=123456&id=10000", dataType: "json",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8 success: function(data){ console.log(data) $("#getUserMsg").html("userName:"+data.userName+"password:"+data.password) } }); }); List参数绑定

在controller中写List<Integer> 请求参数

@GetMapping("/getIds") public List<Long> getIds(@RequestParam List<Long> ids){ return ids; }

jquery的ajax请求

$("#getIds").click(function(){ $.ajax({ type: "get",//type:get type:post type:put type:delete url: "/getIds?ids=1,2,3", dataType: "json",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8 success: function(data){ console.log(data) $("#getIdsMsg").html(data[0]+","+data[1]+","+data[2]) } }); }); Map参数绑定

controller中添加Map实体类参数

@GetMapping(value = "/getMap",produces = {"application/json;charset=utf-8"}) public Map<String,Object> getMap(@RequestParam Map<String,Object> map){ return map; }

jquery中的ajax请求

$("#getMap").click(function(){ $.ajax({ type: "get",//type:get type:post type:put type:delete url: "/getMap?id=10&name=小王同学&salary=3000", dataType: "json",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8 success: function(data){ console.log(data) $("#getMapMsg").html("id="+data.id+",name="+data.name+",salary="+data.salary) } }); }); 数组类型参数绑定

controller增加数组请求参数

@GetMapping("/getArr") public String[] getArr(String[] arr){ return arr; }

jquery中的ajax请求

$.ajax({ type: "get",//type:get type:post type:put type:delete url: "/getArr?arr=小王同学,滑雪,溜冰", dataType: "json",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8 success: function(data){ console.log(data) $("#getArrMsg").html(data[0]) } }); POST请求/响应

由于前后端分离以及前端的多样性，通常我们使用json数据格式进行参数/数据传递，说到json格式，就得先说一下@RequestBody，这个是使用Json模式进行参数绑定必不可少的一环

1、@RequestBody注解解析

1）@RequestBody注解的作用将json格式的数据转为java对象

2）@RequestBody常用其来处理application/json类型

3）@RequestBody接收的是一个json格式的字符串

基本类型参数

在controller中增加基本类型参数

@PostMapping("/postInt") public Integer postInt(Integer id){ return id; }

jquery的ajax请求

$.ajax({ type: "post", url: "/postInt", data: {"id":1000}, dataType: "json", success: function(data){ console.log(data) $("#postIntMsg").html(data) } }); json模式直接绑定自定义对象类型

在controller中增加自定义类型参数

@PostMapping("/postUser") public User postUser(@RequestBody User user){ return user; }

jquery的ajax请求

$.ajax({ type: "post", url: "/postUser", data: JSON.stringify({"userName":"小黑","password":"123456"}), dataType: "json", contentType : 'application/json;charset=utf-8', success: function(data){ console.log(data) $("#postUserMsg").html(data.userName+","+data.password) } }); json模式直接绑定自定义复合对象类型

在OrderForm类中有Goods类

@Data public class OrderForm { private String sn; private Goods goods; } @Data public class Goods { private Long id; private String goodsName; }

增加OrderForm的controller

@PostMapping(value = "/postOrderForm",produces = {"application/json;charset=utf-8"}) public OrderForm postOrderForm(@RequestBody OrderForm orderForm){ return orderForm; }

jquery的ajax请求

$.ajax({ type: "post", url: "/postOrderForm", data: JSON.stringify( { "sn":"123456789", "goods":{"id":10,"goodsName":"华为手机"} } ), dataType: "json", contentType : 'application/json;charset=utf-8', success: function(data){ console.log(data) $("#postOrderFormMsg").html("sn:"+data.sn+",goodsName="+data.goods.goodsName) } }); json模式绑定数组类型

在controller中增加List<Integer> 参数

@PostMapping("/postIds") public List<Integer> postIds(@RequestBody List<Integer> ids){ return ids; }

jquery的ajax请求

$.ajax({ type: "post", url: "/postIds", data: JSON.stringify([1,2,3,4,5]), dataType: "json", contentType : 'application/json;charset=utf-8', success: function(data){ console.log(data) $("#postIdsMsg").html(data[0]+","+data[1]) } }); json模式绑定多个对象 1）使用List<E>获取 @PostMapping("/postUsers") public List<User> postUsers(@RequestBody List<User> users){ return users; } $.ajax({ type: "post", url: "/postUsers", data: JSON.stringify( [ {"userName":"admin","password":"123456"}, {"userName":"manager","password":"manager"} ]), dataType: "json", contentType : 'application/json;charset=utf-8', success: function(data){ console.log(data) $("#postUsersMsg").html(data[0].userName+","+data[1].userName) } }); 2）使用Map<String,Object>接收 @PostMapping("/postMap") public Map<String,Object> postMap(@RequestBody Map<String,Object> map){ return map; } $.ajax({ type: "post", url: "/postMap", data: JSON.stringify({"name":"小王同学","salary":5000,"age":20}), dataType: "json", contentType : 'application/json;charset=utf-8', success: function(data){ console.log(data) $("#postMapMsg").html(data.name+","+data.salary+","+data.age) } }); 代码地址