반응형
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>

반응형
'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글
[Ajax] 11. Ajax 단축 메소드 (0) | 2021.10.06 |
---|---|
[Ajax] 10. Ajax 콜백 함수 (0) | 2021.10.06 |
[Ajax] 08. Ajax POST방식과 Json POST방식 (0) | 2021.10.06 |
[Ajax] 07. Ajax 동기 방식(Sync)과 비동기 방식(Async) (0) | 2021.10.06 |
[Ajax] 06. GET 방식과 POST방식 (0) | 2021.10.06 |
댓글