关于javascript:Spring-Controller-接收前端JSON数据

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(`状态码: ${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("数据:" + 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(`状态码: ${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("数据:" + 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(`状态码: ${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("数据:" + 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()本义，本义后数据为一串字符串，所以只能应用String接管，再应用Java json 工具类转换成对应的对象

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(`状态码: ${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("数据:" + data);
}

总结

应用post申请传递json仍然是最好的形式，用get也不是不能够，然而get有长度限度。