● Json 파일을 읽어오는 방법에 대해서 배웠다. 우선, success 메시지를 alert으로 띄워서 항상 제대로 데이터가 넘어오는지 확인해야한다.
간단하게, json 파일을 작성했다.
data.json
[
{
"name" : "홍길동",
"age" : 24,
"address" : "서울시",
"phone" : "123"
},
{
"name" : "성춘향",
"age" : 16,
"address" : "남원시",
"phone" : "234"
},
{
"name" : "혜승츄",
"age" : 27,
"address" : "강릉시",
"phone" : "345"
}
]
● 기본 셋팅
- String -> Json 으로 바꾸는 함수 : JSON.parse // Json -> String 으로 바꾸는 함수 : JSON.stringify
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<br>
<button type="button">click</button>
<script type="text/javascript">
$(function () {
$("button").click(function () {
// String -> Json 으로 바꾼 함수 : JSON.parse
// Json -> String 으로 바꾼 함수 : JSON.stringify
$.ajax({
url: "data.json", // 행선지
type: 'get',
datatype: "json", // 여기까지 불러오는 것, 갈만한 데이터가 없기 때문에 data 빼고 썼음
success: function( json ){ // parameter는 뭘 쓰던 상관 없음!
alert('success');
},
error:function() {
alert('error');
}
});
});
});
</script>
</body>
</html>
|
cs |
● JSon에 저장된 3명의 데이터를 alert으로 Json 파일에 저장된 데이터들을 통으로 불러와보겠다. 결과창을 보면 index.html에서 이동되지 않고 데이터를 불러오는 것을 알 수 있다.
let str = JSON.stringify(json); // json을 String으로 바꾼다. (기억해두자)
alert(str);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<br>
<button type="button">click</button>
<script type="text/javascript">
$(function () {
$("button").click(function () {
// String -> Json 으로 바꾼 함수 : JSON.parse
// Json -> String 으로 바꾼 함수 : JSON.stringify
$.ajax({
url: "data.json", // 행선지
type: 'get',
datatype: "json", // 여기까지 불러오는 것, 갈만한 데이터가 없기 때문에 data 빼고 썼음
success: function( json ){ // parameter는 뭘 쓰던 상관 없음
// alert('success');
// alert( json );
let str = JSON.stringify(json); // json을 String으로 바꾼다. (기억해두자)
alert(str);
},
error:function() {
alert('error');
}
});
});
});
</script>
</body>
</html>
|
cs |
● 자, 그럼 이제 json을 형식을 json 통으로 가져오는 것이 아닌, 형식을 갖춰서 불러와보려고 한다.
<script type="text/javascript">
$(function () {
$("button").click(function () {
// String -> Json 으로 바꾼 함수 : JSON.parse
// Json -> String 으로 바꾼 함수 : JSON.stringify
$.ajax({
url: "data.json", // 행선지
type: 'get',
datatype: "json", // 여기까지 불러오는 것, 갈만한 데이터가 없기 때문에 data 빼고 썼음
success: function( json ){ // parameter는 뭘 쓰던 상관 없음
// alert('success');
// alert( json );
// let str = JSON.stringify(json); // json을 String으로 바꾼다. (기억해두자)
// alert(str);
alert(json[0].name + " " + json[0].age); // json 불러오기
},
error:function() {
alert('error');
}
});
});
});● 상기에서 alert으로 데이터가 잘 도착하는 것을 보았으니, 이제 화면에 띄워보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$(function () {
$("button").click(function () {
// String -> Json 으로 바꾼 함수 : JSON.parse
// Json -> String 으로 바꾼 함수 : JSON.stringify
$.ajax({
url: "data.json", // 행선지
type: 'get',
datatype: "json", // 여기까지 불러오는 것, 갈만한 데이터가 없기 때문에 data 빼고 썼음
success: function( json ){ // parameter는 뭘 쓰던 상관 없음
for(var i = 0; i < json.length; i++) {
$("#demo").append(json[i].name + " ");
$("#demo").append(json[i].age + " ");
$("#demo").append(json[i].address + " ");
$("#demo").append(json[i].phone + "<br>");
}
},
error:function() {
alert('error');
}
});
});
|
cs |
※ .append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다.
● 데이터를 상기 코드에서 for문으로 데려왔지만, each문으로 데려오는 1가지 방법이 더 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<br>
<button type="button">click</button>
<script type="text/javascript">
$(function () {
$("button").click(function () {
// String -> Json 으로 바꾼 함수 : JSON.parse
// Json -> String 으로 바꾼 함수 : JSON.stringify
$.ajax({
url: "data.json", // 행선지
type: 'get',
datatype: "json", // 여기까지 불러오는 것, 갈만한 데이터가 없기 때문에 data 빼고 썼음
success: function( json ){ // parameter는 뭘 쓰던 상관 없음
/*// (1) for문
for(var i = 0; i < json.length; i++) {
$("#demo").append(json[i].name + " ");
$("#demo").append(json[i].age + " ");
$("#demo").append(json[i].address + " ");
$("#demo").append(json[i].phone + "<br>");
}
*/
// (2) each문
$.each(json, function (index, item) { // index = i, item은 딴 걸로 해도 된다, 계속 돌아가면서 추가되는 것
$("#demo").append( index + " " );
$("#demo").append( item.name + " " );
$("#demo").append( item.age + " " );
$("#demo").append( item.address + " " );
$("#demo").append( item.phone + " <br> " );
});
},
error:function(){
alert('error');
}
});
});
});
</script>
</body>
</html>
|
cs |
'개발 > JavaScript' 카테고리의 다른 글
| [Ajax] #06. MVC Model 1 :: JSP + Ajax 적용한 간단한 예제 (1) (0) | 2020.07.25 |
|---|---|
| [Ajax] #05. xml 파싱 :: 파일 불러와서 접근하는 방법 (0) | 2020.07.25 |
| [Ajax] #03. Ajax 예제 :: (2) Click시 jsp -> html -> jsp 데이터 갔다가 돌아오기 (0) | 2020.07.25 |
| [Ajax] #02. Ajax 예제 :: (1) Click시 데이터 불러오기 (0) | 2020.07.25 |
| [Ajax] #01. Ajax의 정의와 필요성 (0) | 2020.07.25 |
