🎨 민지 프로젝트 복습/정리용
프로젝트에서 Ajax를 직접 써보면서 서버에서 데이터 받아오는 부분이 제일 힘들었고 많이 헤맸었는데
깔끔하게 정리하고 싶어서 정리해본다
Ajax 코드는 다 다른데 그렇다고 다 돌아가는건 아니라서 ㅠㅡㅠ
이 글은 서버에서 JSP로 데이터를 받아와 접근하는 방법을 정리한 글이기 때문에
받아오는 부분인 success() 내부 위주로 봐주세요
1. jsp
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- 추가 -->
<meta charset="utf-8" />
</head>jquery 사용을 위한 라이브러리 추가
★예시를 위한★ (필수아님)
2. FruitVO
이 게시글에서는 ajax 통신 방법 위주로 작성했습니다!
그래서 데이터를 DB에서 갖고오지 않고 controller 에서 대충 만들기 때문에
디폴트 생성자를 수기로 작성했습니다.
예시 그대로 FruitVO를 만들어서 사용하실 분들이라면
그대로 복사해서 사용해주세요
디폴트 생성자 없으면 에러발생합니다!!
생성자를 본인이 직접 정의했을 경우 ▶ 반드시 디폴트 생성자도 같이 작성하기
생성자 정의 안했을 경우 ▶ 프로그램이 직접 디폴트 생성자를 만들기 때문에 상관 X
public class FruitVO {
private int price;
private String name;
private String introduce;
public FruitVO() {} /* absolutely necessary */
public FruitVO(int price, String name, String introduce) {
this.price=price;
this.name=name;
this.introduce=introduce;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getIntroduce() {
return introduce;
}
public void setIntroduce(String introduce) {
this.introduce = introduce;
}
}
<body>
<input type="button" onclick="request()" value="과일사세요"> <br>
<p id="result"></p>
</body>
1. vo return
@RequestMapping(value="/register.do", method=RequestMethod.POST)
@ResponseBody
public FruitVO returnVO() throws Exception {
logger.info("과일: " + fruit.getName() + " 가격: "+ fruit.getPrice());
FruitVO fvo = new FruitVO(1000, "포도", "달고 맛있는 포도");
return fvo;
}
function request(){
$.ajax({
url: "./register.do",
type: "POST",
success : function(data){
alert(data.price + " " + data.name + " " + data.introduce);
// $('#result').text(data.price + " " + data.name + " " + data.introduce);
},
error :function(){
alert("request error!");
}
});
}
success() 에서는 private 변수 이름 그대로 접근하면 됩니다.
2. list return
@RequestMapping(value="/register.do", method=RequestMethod.POST)
@ResponseBody
public List<FruitVO> returnListVO() throws Exception {
/* logger.info("과일: " + fruit.getName() + " 가격: "+ fruit.getPrice()); */
List<FruitVO> list = new ArrayList<FruitVO>();
list.add(new FruitVO(4000, "단감", "홍시보단 단감"));
list.add(new FruitVO(1000, "포도", "달고 맛있는 포도"));
list.add(new FruitVO(2000, "복숭아", "복숭아는 말랑복숭아"));
return list;
}function request(){
$.ajax({
url: "./register.do",
type: "POST",
success : function(data){
$(data).each(function(){
alert(this.price + " " + this.name + " " + this.introduce);
});
},
error :function(){
alert("request error!");
}
});
}
3. map return
RequestMapping(value = "/register.do", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> returnMap() throws Exception {
Map<String, Object> map = new HashMap<String, Object>();
List<FruitVO> list = new ArrayList<FruitVO>();
list.add(new FruitVO(4000, "단감", "홍시보단 단감"));
list.add(new FruitVO(1000, "포도", "달고 맛있는 포도"));
list.add(new FruitVO(2000, "복숭아", "복숭아는 말랑복숭아"));
boolean flag = false;
String str = "샤인머스캣";
int price = 13900;
/* map.put(jsp에서 사용할 이름, 넘길 자바변수); */
map.put("flag", flag);
map.put("str", str);
map.put("price", price);
map.put("list", list);
return map;
}
function request(){
$.ajax({
url: "./register.do",
type: "POST",
success : function(data){
var flag = data.flag;
var str = data.str;
var price = data.price;
var list = data.list;
var temp ="";
for(var i=0; i< list.length; i++) {
//alert(list[i].price + " " + list[i].name + " " + list[i].introduce);
temp += list[i].price + " " + list[i].name + " " + list[i].introduce + " ";
}
$('#result').text(flag + " " + str + " " + price);
$('#result2').text(temp);
},
error :function(){
alert("request error!");
}
});
} 
프로젝트 할때는 너무 어려워서 울고싶었는데 이제 보니까 쉬워보인다 ( ´•̥ו̥` )
