728x90
ajax로 데이터 받아오기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 800px;
}
td, th {
border: 1px solid #000;
height: 30px;
text-align: center;
}
</style>
<script type="text/javascript" src="../jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "../json/temp.json", // 경로
type: "GET", // 전송방식(GET: 주소형태, POST: 주소 헤더형태)
dataType: "json", //데이터 형태
success: function(res) { // 성공했을때 결과를 res에 받고 함수 실행
console.log(res);
var html = "";
/*
for(var data of res){
html +="<tr>";
html +="<td>"+ data.city +" </td>";
html +="<td>"+ data.temp[0] +" ℃</td>";
html +="<td>"+ data.temp[1]+" ℃</td>";
html +="<td>"+ data.temp[2]+" ℃</td>";
html +="<td>"+ data.temp[3]+" ℃</td>";
html +="<td>"+ data.temp[4]+" ℃</td>";
html +="<td>"+ data.temp[5]+" ℃</td>";
html +="<td>"+ data.temp[6]+" ℃</td>";
html +="<td>"+ data.temp[7]+" ℃</td>";
html +="<td>"+ data.temp[8]+" ℃</td>";
html +="<td>"+ data.temp[9]+" ℃</td>";
html +="<td>"+ data.temp[10]+" ℃</td>";
html +="<td>"+ data.temp[11]+" ℃</td>";
html +="</tr>";
}
*/
for(var data of res){
html +="<tr>";
html +="<td>"+ data.city +" </td>";
for(var i=0; i< data.temp.length; i++){
html +="<td>"+ data.temp[i] +" ℃</td>";
}
/*
for(var temp of data.temp){
html +="<td>"+ temp +" ℃</td>";
}
*/
html +="</tr>";
}
$("tbody").html(html);
},
error : function(request, status, error) { // 실패했을때 함수 실행
console.log(request.responseText); // 실패 상세 내역
}
})
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th colspan="12">월</th>
</tr>
<tr>
<th>도시</th>
<th>1월</th>
<th>2월</th>
<th>3월</th>
<th>4월</th>
<th>5월</th>
<th>6월</th>
<th>7월</th>
<th>8월</th>
<th>9월</th>
<th>10월</th>
<th>11월</th>
<th>12월</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
temp json
오늘은 오전에 실습 하나 하고,
계속 팀별 프로젝트....
내일 시험있어서 시간 넉넉히 주신듯
728x90
'TIL > academy' 카테고리의 다른 글
| 국비 TIL(Today I Learned) 20220729 core태그, el 태그, spring설치 (0) | 2022.07.29 |
|---|---|
| 국비 TIL(Today I Learned) 20220728 시험, 팀플 (0) | 2022.07.29 |
| 국비 TIL(Today I Learned) 20220726 제이쿼리 슬라이드, 테이블 체크박스, ajax (0) | 2022.07.27 |
| 국비 TIL(Today I Learned) 20220725 제이쿼리 API (0) | 2022.07.25 |
| 국비 TIL(Today I Learned) 20220722 JS 이벤트 (0) | 2022.07.22 |