본문 바로가기
💻 1. 웹개발_Front end/1-7 Ajax

[Ajax] 09. Ajax Bootstrap table로 나타내기

by 달님🌙 2021. 10. 6.
반응형

 

1. Ajax - bootstrap_table

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<title>Ajax 사용 - bootstrap table</title>
<style>
	h1 {
		margin-bottom: 50px;
	}
</style>
</head>
<body>
	<h1>주소록</h1>
	<div class="table-responsive">
		<button type="button" onclick="reqList();">조회</button>
		<table class="table">
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>전화</th>
				<th>주소</th>
			</tr>
			<!-- 
			<tr>
				<td>contact.no</td>
				<td>contact.name</td>
				<td>contact.tel</td>
				<td>contact.address</td>
			</tr>
			 -->
		</table>
	</div>
	<script>
		function reqList() {
			//서버로부터 응답받은 데이터를 Json 형식으로 받을 변수
			var cont;
			
			//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				url : "/contact/list.do",
				//메소드 타입 지정
				type : "GET",
				//요청 시 서버로 전달할 데이터 지정
				data : { pageno : 1, pagesize : 15 },
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log(data);
					//JSON.parse() : Json 문자열 -> Json 객체로 변환
					cont = JSON.parse(data);
					console.log(cont);
					
					//cont["contacts"] : cont Json 객체의 contacts라는 배열에 접근
					for(var i = 0; i < cont["contacts"].length; i++) {
						var contact = cont["contacts"][i];
						console.log(contact);
						
						var $table = $(".table"); //클래스 선택자을 이용해 table클래스를 변수로 담음
						var $tr = $("<tr></tr>"); //tr 태그 생성
						//contact.no, contact.name, contact.tel, contact.address : 배열의 속성값에 접근
						var $td0 = $("<td>" + contact.no + "</td>"); //td 태그 생성 및 요소 추가
						var $td1 = $("<td>" + contact.name + "</td>");
						var $td2 = $("<td>" + contact.tel + "</td>");
						var $td3 = $("<td>" + contact.address + "</td>");
						
						$tr.append($td0);
						$tr.append($td1);
						$tr.append($td2);
						$tr.append($td3);
						/* 
						<tr>
							<td>contact.no</td>
							<td>contact.name</td>
							<td>contact.tel</td>
							<td>contact.address</td>
						</tr> 
						*/
						$table.append($tr);
					}
				}
			});
		}
	</script>
</body>
</html>

 

 

 

반응형

댓글