본문 바로가기

JavaScript/Ajax, Axios(비동기 통신)

json <-> ajax간 연동

반응형
[
	{
		"name":"홍길동",
		"age":24,
		"address":"서울시",
		"phone":"123"
	},
	{
		"name":"성춘향",
		"age":16,
		"address":"남원시",
		"phone":"234"
	},
	{
		"name":"홍두께",
		"age":22,
		"address":"강릉시",
		"phone":"345"
	}
]
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>

	<p id="demo"></p>
	<br>
	<button>click</button>
<script type="text/javascript">
$(function() {
	
	//model1, model2
	$("button").click(function () {
		
		$.ajax({
			url:"data.jsp",
			type:"get",		//jsp
			datatype:"json",
			success:function(obj){
				//alert("success");
				//alert(obj);
				var data = JSON.parse(obj);
				alert(data.num);
				alert(data.name);
				
				// json -> String
				var str = JSON.stringify(data);
				alert(str.num);
			},
			error:function(){
				alert("error");
			}
			
		});
		
	});
})
</script>



</body>
</html>
반응형