Spring Controller接收前端JSON數(shù)據(jù)請求方式

更新時間：2023年07月20日 09:37:24 作者：李晗

這篇文章主要為大家介紹了Spring Controller接收前端JSON數(shù)據(jù)請求方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

POST請求方式

1. 使用實體類接收

const http = require('http');
const postData = JSON.stringify({
  "id": 1,
  "name": "三體",
  "price": 180
});
const options = {
  hostname: 'localhost',
  port: 8080,
  path: '/ReceiveJsonController/receiveJson1',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Content-Length': Buffer.byteLength(postData)
  }
}
const req = http.request(options, res => {
  console.log(`狀態(tài)碼: ${res.statusCode}`)
  res.on('data', d => {
    process.stdout.write(d)
  })
})
req.on('error', error => {
  console.error(error)
})
req.write(postData)
req.end()

@PostMapping("/receiveJson1")
public void receiveJson1(@RequestBody Book book, HttpServletRequest httpServletRequest) {
    logger.info("請求方式：" + httpServletRequest.getMethod());
    logger.info("數(shù)據(jù):" + book);
}

2. 使用List實體類接收

const http = require('http');
const postData = JSON.stringify([{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
},{
  "id": 1,
  "name": "三體",
  "price": 180
}]);
const options = {
  hostname: 'localhost',
  port: 8080,
  path: '/ReceiveJsonController/receiveJson2',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Content-Length': Buffer.byteLength(postData)
  }
}
const req = http.request(options, res => {
  console.log(`狀態(tài)碼: ${res.statusCode}`)
  res.on('data', d => {
    process.stdout.write(d)
  })
})
req.on('error', error => {
  console.error(error)
})
req.write(postData)
req.end()

@PostMapping("/receiveJson2")
public void receiveJson2(@RequestBody List<Book> books, HttpServletRequest httpServletRequest) {
    logger.info("請求方式：" + httpServletRequest.getMethod());
    logger.info("數(shù)據(jù):" + books);
}

3. 使用Map接收

const http = require('http');
const postData = JSON.stringify({
  "data": {
    "id": 1,
    "name": "三體",
    "price": 180
  }
});
const options = {
  hostname: 'localhost',
  port: 8080,
  path: '/ReceiveJsonController/receiveJson3',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Content-Length': Buffer.byteLength(postData)
  }
}
const req = http.request(options, res => {
  console.log(`狀態(tài)碼: ${res.statusCode}`)
  res.on('data', d => {
    process.stdout.write(d)
  })
})
req.on('error', error => {
  console.error(error)
})
req.write(postData)
req.end()

@PostMapping("/receiveJson3")
public void receiveJson3(@RequestBody Map<String, Object> paramsMap, HttpServletRequest httpServletRequest) {
    logger.info("請求方式：" + httpServletRequest.getMethod());
    logger.info("數(shù)據(jù):" + paramsMap);
}

使用Map接收，注意是Key:Value形式

// 單個對象
{
  "data": {
    "id": 1,
    "name": "三體",
    "price": 180
  }
}
// 多個對象
{
    "data": [{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    },{
      "id": 1,
      "name": "三體",
      "price": 180
    }]
}

Get請求方式

get請求方式需要注意encodeURIComponent()轉(zhuǎn)義，轉(zhuǎn)義后數(shù)據(jù)為一串字符串，所以只能使用String接收，再使用Java json 工具類轉(zhuǎn)換成對應(yīng)的對象

const http = require('http')
const options = {
  hostname: 'localhost',
  port: 8080,
  path: '/ReceiveJsonController/receiveJson5',
  method: 'GET'
}
let data = {
  "id": 1,
  "name": "三體",
  "price": 180
};
let jsonString = "?data=" + encodeURIComponent(JSON.stringify(data));
options.path = options.path + jsonString
const req = http.request(options, res => {
  console.log(`狀態(tài)碼: ${res.statusCode}`)
  res.on('data', d => {
    process.stdout.write(d)
  })
})
req.on('error', error => {
  console.error(error)
})
req.end()

@GetMapping("/receiveJson5")
public void receiveJson5(@RequestParam("data") String data, HttpServletRequest httpServletRequest) {
    logger.info("請求方式：" + httpServletRequest.getMethod());
    logger.info("數(shù)據(jù):" + data);
}