Springboot Ajax get / post request case

Programmer light 2022-02-13 07:52:50 阅读数:740

springboot ajax post request case
 

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

copyright:author[Programmer light],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130752483062.html