๊ด€๋ฆฌ ๋ฉ”๋‰ด

bom's happy life

[Spring] Ajax๋กœ List๋ฐ์ดํ„ฐ ๋ฐ›๊ธฐ ๋ณธ๋ฌธ

Deveolpment Study๐Ÿ—‚๏ธ/Spring Framework

[Spring] Ajax๋กœ List๋ฐ์ดํ„ฐ ๋ฐ›๊ธฐ

bompeach 2023. 11. 1. 15:53

ajax๋กœ ๋ฐ์ดํ„ฐ๋ฅผ selectํ•ด์„œ ๋ฐ›์œผ๋ ค๊ณ  ํ•˜๋Š”๋ฐ ๊ทธ๋Ÿผ ์ปจํŠธ๋กค๋Ÿฌ์—์„œ listํ˜•์œผ๋กœ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ๋œ๋‹ค.

๊ทผ๋ฐ ajax์—์„œ๋Š” jsonํ˜•์‹์œผ๋กœ ๋ฐ›์•„์•ผ javascript ๊ฐ์ฒด๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ.

 

๊ทธ ์—ญํ• ์„ @ResponseBody๊ฐ€ ํ•ด์ค€๋‹ค.

 

return testService.selectList(testVo); ์ฝ”๋“œ๋Š” ์ž๋ฐ” ๋ฆฌ์ŠคํŠธList๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์„ jsonํ˜•์‹์œผ๋กœ ํด๋ผ์ด์–ธํŠธ๋กœ ๋ฐ˜ํ™˜ํ•˜๋ ค๋ฉด ์Šคํ”„๋ง ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ json๋ณ€ํ™˜์„ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•œ๋‹ค.

์Šคํ”„๋ง์€ @ResponseBody ์–ด๋…ธํ…Œ์ด์…˜์ด ์ ์šฉ๋œ ๋ฉ”์†Œ๋“œ์—์„œ ๊ฐ์ฒด๋ฅผ ์ž๋™์œผ๋กœ json์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ๋กœ ๋ณด๋‚ด์ค€๋‹ค.

 

๋”ฐ๋ผ์„œ, return testService.selectList(testVo); ๋ฉ”์„œ๋“œ๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฐ์ฒด๊ฐ€ Listํ˜•ํƒœ์ด์ง€๋งŒ,

์Šคํ”„๋ง์ด @ResponseBody ์–ด๋…ธํ…Œ์ด์…˜์„ ์‚ฌ์šฉํ•˜๋ฉด json์œผ๋กœ ์ž๋™ ๋ณ€ํ™˜๋˜์–ด ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์ „๋‹ฌ๋œ๋‹ค.

ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ๋Š” ์ด json๋ฐ์ดํ„ฐ๋ฅผ javascript ๊ฐ์ฒด๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. 

 

ํด๋ผ์ด์–ธํŠธ์—์„œ data ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ด json๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ data๋Š” ์Šคํ”„๋ง์ด ๋ฐ˜ํ™˜ํ•˜๋Š” jsonํ˜•์‹์˜ ๊ฐ์ฒด์ด๋‹ค.

 

 

์ฝ”๋“œ์˜ˆ์‹œ >

$.ajax({
    type    : "POST",
    url     : "${pageContext.request.contextPath }/test/selectList",
    data    : { seq: seq },
    success : function (data) {
      console.log(success);
    },
    error  : function(error) {
      console.log(error);
    }
  });
@ResponseBody
@PostMapping("/selectList")
public String test(Model model, @ModelAttribute("searchVO") TestVo testVo) {
    return testService.selectList(testVo);
}