This article mainly aims at SpringBoot Of ajax request 、 Response case , With appropriate notes , Easy to use in development , All are rest Interface

$.ajax in contentType and dataType

contentType： Set the format you send to the server

dataType： Set the format of the data you receive from the server ,json/text

contentType The default value is ：“application/x-www-form-urlencoded; charset=UTF-8”

JSON.stringify()： take js Data to json Format

Catalog

GET request / Respond to

Basic data type （ With int For example ）

Packing type parameter binding

Custom object type parameter binding

List Parameter binding

Map Parameter binding

Array type parameter binding

POST request / Respond to

Basic type parameters

json The mode is directly bound to the user-defined object type

json Custom object direct binding mode

json Pattern binding array type

json Pattern binding multiple objects

1） Use List obtain

2） Use Map receive

Code address

---

GET request / Respond to

 establish ：DataGetRequestController

@RestController
public class DataGetRequestController {
}

Basic data type （ With int For example ）

stay controller Write a int Parameter binding method

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

jquery Of ajax request

$("#getInt").click(function(){
$.ajax({
type: "get",
url: "/getInt?id=1000",
dataType: "text",// Set the format of the data you receive from the server , Fill in... According to the return type of the server ：json、text
//contentType : 'application/json;charset=utf-8',// Set the format you send to the server : application/json;charset=utf-8
success: function(data){
console.log(data)
$("#getIntMsg").html(data)
}
});
});

Packing type parameter binding

stay controller Write the method of binding multiple wrapper type parameters in

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

jquery Of ajax request

$("#getBox").click(function(){
$.ajax({
type: "get",//type:get type:post type:put type:delete
url: "/getBox?id=1000&name= Xiao Wang ",
dataType: "text",// Set the format of the data you receive from the server , Fill in... According to the return type of the server ：json、text
//contentType : 'application/json;charset=utf-8',// Set the format you send to the server : application/json;charset=utf-8
success: function(data){
console.log(data)
$("#getBoxMsg").html(data)
}
});
});

Custom object type parameter binding

stay controller Write custom request parameters in

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

jquery Of ajax request

$("#getUser").click(function(){
$.ajax({
type: "get",//type:get type:post type:put type:delete
url: "/getUser?userName= Xiao Wang &password=123456&id=10000",
dataType: "json",// Set the format of the data you receive from the server , Fill in... According to the return type of the server ：json、text
//contentType : 'application/json;charset=utf-8',// Set the format you send to the server : application/json;charset=utf-8
success: function(data){
console.log(data)
$("#getUserMsg").html("userName:"+data.userName+"password:"+data.password)
}
});
});

List Parameter binding

stay controller Write in List<Integer> Request parameters

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

jquery Of ajax request

$("#getIds").click(function(){
$.ajax({
type: "get",//type:get type:post type:put type:delete
url: "/getIds?ids=1,2,3",
dataType: "json",// Set the format of the data you receive from the server , Fill in... According to the return type of the server ：json、text
//contentType : 'application/json;charset=utf-8',// Set the format you send to the server : application/json;charset=utf-8
success: function(data){
console.log(data)
$("#getIdsMsg").html(data[0]+","+data[1]+","+data[2])
}
});
});

Map Parameter binding

controller Add Map Entity class parameters

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

jquery Medium ajax request

$("#getMap").click(function(){
$.ajax({
type: "get",//type:get type:post type:put type:delete
url: "/getMap?id=10&name= Xiao Wang &salary=3000",
dataType: "json",// Set the format of the data you receive from the server , Fill in... According to the return type of the server ：json、text
//contentType : 'application/json;charset=utf-8',// Set the format you send to the server : application/json;charset=utf-8
success: function(data){
console.log(data)
$("#getMapMsg").html("id="+data.id+",name="+data.name+",salary="+data.salary)
}
});
});

Array type parameter binding

controller Add array request parameters

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

jquery Medium ajax request

$.ajax({
type: "get",//type:get type:post type:put type:delete
url: "/getArr?arr= Xiao Wang , skiing , skating ",
dataType: "json",// Set the format of the data you receive from the server , Fill in... According to the return type of the server ：json、text
//contentType : 'application/json;charset=utf-8',// Set the format you send to the server : application/json;charset=utf-8
success: function(data){
console.log(data)
$("#getArrMsg").html(data[0])
}
});

POST request / Respond to

Due to the separation of front and rear ends and the diversity of front ends , Usually we use json Data format parameters / Data transfer , Speaking of json Format , You have to say @RequestBody, This is the use of Json Pattern is an essential part of parameter binding

1、@RequestBody Annotation analysis

1）@RequestBody The role of annotations will be json Format data to java object

2）@RequestBody It is often used to deal with application/json type

3）@RequestBody It received a json Format string

Basic type parameters

stay controller Basic type parameters are added in

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

jquery Of ajax request

$.ajax({
type: "post",
url: "/postInt",
data: {"id":1000},
dataType: "json",
success: function(data){
console.log(data)
$("#postIntMsg").html(data)
}
});

json The mode is directly bound to the user-defined object type

stay controller Add custom type parameters in

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

jquery Of ajax request

$.ajax({
type: "post",
url: "/postUser",
data: JSON.stringify({"userName":" Little black ","password":"123456"}),
dataType: "json",
contentType : 'application/json;charset=utf-8',
success: function(data){
console.log(data)
$("#postUserMsg").html(data.userName+","+data.password)
}
});

json Custom object direct binding mode

stay OrderForm There are Goods class

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

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

increase OrderForm Of controller

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

jquery Of ajax request

$.ajax({
type: "post",
url: "/postOrderForm",
data: JSON.stringify(
{
"sn":"123456789",
"goods":{"id":10,"goodsName":" Huawei mobile phones "}
}
),
dataType: "json",
contentType : 'application/json;charset=utf-8',
success: function(data){
console.log(data)
$("#postOrderFormMsg").html("sn:"+data.sn+",goodsName="+data.goods.goodsName)
}
});

json Pattern binding array type

stay controller add List<Integer> Parameters

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

jquery Of ajax request

$.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 Pattern binding multiple objects

1） Use List<E> obtain

 @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） Use Map<String,Object> receive

 @PostMapping("/postMap")
public Map<String,Object> postMap(@RequestBody Map<String,Object> map){
return map;
}

$.ajax({
type: "post",
url: "/postMap",
data: JSON.stringify({"name":" Xiao Wang ","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)
}
});

Code address