본문 바로가기

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

jsp < - > ajax간 데이터 연동

반응형
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
// DB
String userName = "홍길동";
int userNumber = 1001;

String json = "{ \"num\":" + userNumber + ", \"name\":\"" + userName + "\"}";

// {"num":10001, "name":"홍길동" }

out.println(json);
%>
<%@ 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">
$("button").click(function() {
	//Jar 파일을 추가할것!!
	$.ajax({
		url:"custuser",		// servlet 
		type: "get",
		datatype:"json",
		data:"id=abc&pwd=123",
		success:function( json ){
			//alert("s");
			//int, string, 다수의 데이터
			
			//var data = JSON.parse(obj);
			//console.log(data.id);
			//alert(json.str);
			/* var data = JSON.parse(json.map);
			alert(data); */
			//alert(json.map.title);
			alert(json.map.list);
			alert(json.map.list[0].number);
			
			
			
		},
		error:function(){
			alert("error");
		}
	})
})
</script>

</body>
</html>
반응형