[javaScript] Ajax(2)

🔥 JSON 라이브러리

• json-lib-x.x-jdkxx.jar → 핵심 라이브러리
• ezmorph-x.x.x.jar → 의존관계 필수 라이브러리
• commons-beanutils-x.x.x.jar → 의존관계 필수 라이브러리
• commons-collections-x.x.x.jar → 의존관계 필수 라이브러리
• commons-lang-x.x.jar → 의존관계 필수 라이브러리
• commons-logging-x.x.jar → 의존관계 필수 라이브러리

🔗 다운로드 방법

1. https://www.json.org/json-en.html 접속
2. 페이지 하단의 Java카테고리에서 Json-lib 클릭
3. Download클릭
4. 페이지 리스트 중 json-lib클릭
5. 다운받은 라이브러리는 src/main/webapp/WEB-INF/lib에 넣기
   
   

    아래의 블로그 참고 👇
    https://chilas-it.tistory.com/193

🔥 JSONObject

🧾 String

String str = "니하오!";

JSONObject jObj = new JSONObject();	// JSON 객체 생성
jObj.put("str", str);

resp.setContentType("application/x-json; charset=utf-8");	// 보내는 데이터의 타입
resp.getWriter().print(jObj);

jQuery

$.ajax({
	url:"./hello",
  	type:"get",
  	success:function(data) {
    	alert(JSON.stringify(data));
		alert(data.str);	// 니하오!
  	error:function() {
      	alert('error');
    }
});

// JSON.stringify(data)
/*
{
   "str":"니하오!"
}
*/

🧾 Object

// dto
Human human = new Human("하니", 18);

JSONObject jObj = new JSONObject();
jObj.put("human", human);	// key값과 객체명은 달라도 됨

resp.setContentType("application/x-json; charset=utf-8");	// 보내는 데이터의 타입
resp.getWriter().print(jObj);

jQuery

$.ajax({
	url:"./hello",
  	type:"get",
  	success:function(data) {
    	alert(JSON.stringify(data));
		let human = data.human;
		alert(human.name);	// 하니
		alert(human.age);	// 18
  	error:function() {
      	alert('error');
    }
});

// JSON.stringify(data)
/*
{
   "human":{
      "age":18,
      "name":"하니"
   }
}
*/

🧾 List

List<Human> list = new ArrayList<>();
List.add(new Human("민지", 18));
List.add(new Human("다니엘", 17));
List.add(new Human("해린", 16));

JSONObject jObj = new JSONObject();
jObj.put("list", list);	

resp.setContentType("application/x-json; charset=utf-8");
resp.getWriter().print(jObj);

jQuery

$.ajax({
	url:"./hello",
  	type:"get",
  	success:function(data) {
    	alert(JSON.stringify(data));
      	
      	let list = data.list;
      	alert(list);	// object object object
      	alert(list[2].name);	// 해린
    },
  	error:function() {
      	alert('error');
    }
});

// JSON.stringify(data)
/*
{
   "list":[
      {
         "age":18,
         "name":"민지"
      },
      {
         "age":17,
         "name":"다니엘"
      },
      {
         "age":16,
         "name":"해린"
      }
   ]
}
*/

🧾 Map

: 다른 데이터를 같이 보내야할 때

servlet

String str = "니하오!";

List<Human> list = new ArrayList<>();
List.add(new Human("민지", 18));
List.add(new Human("다니엘", 17));

Map<String, Object> map = new HashMap<>();
map.put("title", str);
map.put("mylisy", list);

JSONObject jObj = new JSONObject();
jObj.put("map", map);	

resp.setContentType("application/x-json; charset=utf-8");
resp.getWriter().print(jObj);

jQuery

$.ajax({
	url:"./hello",
  	type:"get",
  	success:function(data) {
    	alert(JSON.stringify(data));
      	alert(data.map.mylist[1].name);	// 다니엘
      	alert(data.map.title);	// 니하오
    },
  	error:function() {
      	alert('error');
    }
});

// JSON.stringify(data)
/*
{
   "map":{
      "mylist":[
         {
            "age":18,
            "name":"민지"
         },
         {
            "age":17,
            "name":"다니엘"
         }
      ],
      "title":"니하오!"
   }
}
*/