sungjuks.json
[
{"name":"John", "id":"itwill", "kor":70, "eng":80, "mat":90},
{"name":"Tom", "id":"user1", "kor":75, "eng":80, "mat":95},
{"name":"Michael", "id":"python", "kor":60, "eng":40, "mat":30}
]이번에는 3개씩 가져오는 것을 해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_성적목록보여주기.html</title>
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<button>* JSON 데이터 받아오기 *</button>
<div id="panel"></div>
<script>
$("button").click(function(){
$.ajax("sungjuks.json",{
dataType:"json"
,error:function(error){
alert("ERROR!!" + error);
}//error end
,success:function(result){
// alert(result);
let str = "<table border='1'>";
$.each(result, function(idx, data){
// alert(idx); //요소 순서
// alert(data); //각 배열 요소값
str += "<tr>";
str += " <td>" + data.name + "</td>";
str += " <td>" + data.id + "</td>";
str += " <td>" + data.kor + "</td>";
str += " <td>" + data.eng + "</td>";
str += " <td>" + data.mat + "</td>";
str += "</tr>";
});//each() end
str += "</table>";
$("#panel").append(str);
}//sucess end
});//ajax() end
});//click end
</script>
</body>
</html>
each 반복문은 result에서 요소 하나를 꺼내서 fucntion을 실행하는 것을 반복한다.
'웹개발 교육 > Ajax' 카테고리의 다른 글
| [45일] Ajax (4) - callback 함수 (0) | 2022.09.29 |
|---|---|
| [45일] Ajax (2) - json 데이터 받아오기 1 (0) | 2022.09.29 |
| [45일] Ajax (1) - Ajax란 (0) | 2022.09.29 |
sungjuks.json
[
{"name":"John", "id":"itwill", "kor":70, "eng":80, "mat":90},
{"name":"Tom", "id":"user1", "kor":75, "eng":80, "mat":95},
{"name":"Michael", "id":"python", "kor":60, "eng":40, "mat":30}
]이번에는 3개씩 가져오는 것을 해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_성적목록보여주기.html</title>
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<button>* JSON 데이터 받아오기 *</button>
<div id="panel"></div>
<script>
$("button").click(function(){
$.ajax("sungjuks.json",{
dataType:"json"
,error:function(error){
alert("ERROR!!" + error);
}//error end
,success:function(result){
// alert(result);
let str = "<table border='1'>";
$.each(result, function(idx, data){
// alert(idx); //요소 순서
// alert(data); //각 배열 요소값
str += "<tr>";
str += " <td>" + data.name + "</td>";
str += " <td>" + data.id + "</td>";
str += " <td>" + data.kor + "</td>";
str += " <td>" + data.eng + "</td>";
str += " <td>" + data.mat + "</td>";
str += "</tr>";
});//each() end
str += "</table>";
$("#panel").append(str);
}//sucess end
});//ajax() end
});//click end
</script>
</body>
</html>each 반복문은 result에서 요소 하나를 꺼내서 fucntion을 실행하는 것을 반복한다.
'웹개발 교육 > Ajax' 카테고리의 다른 글
| [45일] Ajax (4) - callback 함수 (0) | 2022.09.29 |
|---|---|
| [45일] Ajax (2) - json 데이터 받아오기 1 (0) | 2022.09.29 |
| [45일] Ajax (1) - Ajax란 (0) | 2022.09.29 |
