에이젝스로 제이슨 받아오기

보내주는 데이터

	@RequestMapping(value="/ex04", produces="application/json;charset=utf-8")
	public @ResponseBody String ex04() {
		log.info("ex04...");
		String data = "";
		
		JSONObject jobj = new JSONObject();
		jobj.put("name", "mark");
		jobj.put("age", 23);
		
		data = jobj.toString();
		
		return data;
	}

에이젝스로 받아오는 데이터
타입을 제이슨으로 하면 제이슨파세는 따로 안해도 됨.

		function loadDoc3(){
			$.ajax({
					url :"/ajax/ex04",
					type : "GET",
// 					dataType :"text",
					dataType :"json",
					success : function(data){
						console.log(data);
// 						var obj = JSON.parse(data);
						$("#demo3").text(data.name);
						}
				});
			}

@RequestMapping(value="/ex07", produces="application/json;charset=utf-8")
	public @ResponseBody String ex07() {
	
		List<SampleDTO> list = new ArrayList<>();
		SampleDTO dto1 = new SampleDTO();
		dto1.setName("jay");
		dto1.setAge(16);
		list.add(dto1);
		
		SampleDTO dto2 = new SampleDTO();
		dto2.setName("marky");
		dto2.setAge(20);
		list.add(dto2);
		
		SampleDTO dto3 = new SampleDTO();
		dto3.setName("jonny");
		dto3.setAge(30);
		list.add(dto3);
		
		String data = "";

		JSONObject jobj = new JSONObject();
		jobj.put("list", list);
		
		data = jobj.toString();
		
		return data;
	}

		function loadDoc6(){
			$.ajax({
					url :"/ajax/ex07",
					type : "post",
					dataType :"json",
					success : function(data){
						console.log(data);
						console.log(data.list[0].name);
						}
				});
			}

콘솔로그 보면 list로 들어가있어서 data.list[0].name으로 받는다.

표로 받기..
자바스크립트가 편하긴 하지만..

	success : function(data){
	console.log(data);
	console.log(data.list[0].name);

	var tbody = document.getElementById("tbody");
	
	for(let i = 0; i<data.list.length; i++){
		let tr = document.createElement("tr");
		
		let td0 = document.createElement("td");
		let txt0 = document.createTextNode(i+1);
		td0.append(txt0);
		tr.append(td0);

		let td1 = document.createElement("td");
		let txt1 = document.createTextNode(data.list[i].name);
		td1.append(txt1);
		tr.append(td1);

		let td2 = document.createElement("td");
		let txt2 = document.createTextNode(data.list[i].age);
		td2.append(txt2);
		tr.append(td2);

		tbody.append(tr);	
		}
	}

결과

밑에는 html

<table border="1">
	<tbody id="tbody">
		<tr>
		<td>  </td> <td> 이름 </td> <td> 나이 </td>
		</tr>
	</tbody>
</table>