AJAX 사용하여 JSON 데이터 출력하기
JSON 데이터 예시
[
{
"name":"홍길동",
"age":24,
"address":"서울시",
"phone":"123"
},
{
"name":"성춘향",
"age":16,
"address":"남원시",
"phone":"234"
},
{
"name":"홍두께",
"age":22,
"address":"강릉시",
"phone":"345"
}
]
AJAX 사용예시
<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">클릭</button>
<!-- json 불러서 p태그에 넣기 -->
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
url : "data.json", // 어디로 갈거니? // 갈 때 데이터
type : "get", // 타입은 뭘 쓸거니?
datatype : "json",
success : function(data) { // 갔다온 다음 결과값
// alert('seccuss'); // 나오면 파일을 찾았다는 것
// alert(data); // [object Object],[object Object],[object Object]
// 데이터를 확인하고 싶을 때.
// let str = JSON.stringify(data); // <> parse()
// alert(str);
$.each(data, function(index, item) { // 데이터 =item
$("#demo").append(index + " "); // 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>$.each(data, function(index, item)
jQuery의 반복문이다.
첫번째 인자로 index를 주고 두번째 인자로 item(콜백함수)을 준다.
index를 기준으로 반복을 한다.
선택요소에 append함수를 사용하여 값을 추가한다.
버튼 클릭시 실행화면
'IT > JavaScript' 카테고리의 다른 글
| [AJAX] Ajax에서 servlet 접근해서 데이터 가져오기 (0) | 2021.06.16 |
|---|---|
| [AJAX] Ajax에서 DB 취합 예시 (0) | 2021.06.16 |
| [AJAX] Ajax의 정의, Ajax 기본 문법 (0) | 2021.06.15 |
| [jQuery] 여러가지 함수 사용 예제 (0) | 2021.06.11 |
| [jQuery] td elemant에 문자열을 치환하도록 하라./이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라 (0) | 2021.06.11 |