반응형
ajax 와 json 을 통해 동적으로 url을 제어하고 데이터를 받아오기 간단예제
#동작화면
#파일 경로
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json and ajax</title>
</head>
<body>
<header>
<h1>json and ajax</h1>
<button id="btn">3마리 동물을 봅시다!</button>
</header>
<div id="animal-info"></div>
<script src="js/main.js"></script>
</body>
</html>
#main.js
var pageCounter = 1;
var animalContainer = document.getElementById('animal-info');
var btn = document.getElementById("btn");
//3마리 동물 버튼이 클릭됐을때 ajax를 통해서 json 파일을 가져온다.
btn.addEventListener("click",function(){
var ourRequest = new XMLHttpRequest();
//받을때 GET, 보낼때 POST
//url을 동적으로 만들어 주기!
ourRequest.open('GET','http://210.222.15.224:81/json/json-'+ pageCounter +'.json');
ourRequest.onload = function(){
//콘솔로 받은 json데이터 확인
//console.log(ourRequest.responseText);
//json 데이터를 변수에 담고
//var ourData = ourRequest.responseText;
//출력 -> '[' 표시만 나온다. 브라우저가 그냥 텍스트 파일이라고 생각해서 발생한 오류
//console.log(ourData[0]);
//해결법: 브라우저에 텍스트가 아닌 json 배열 객체라고 알려주기
//url 연결에 성공했을때 와 실패했을때 에러 컨트롤하기
if(ourRequest.status >= 200 && ourRequest.status < 400){
var ourData = JSON.parse(ourRequest.responseText);
//console.log(ourData[0]);
renderHTML(ourData);
}else{
console.log("we connected to the server, but it returned an error.");
}
};
//url 연결에 실패했을 때
ourRequest.onerror = function(){
console.log("connection error");
}
//ajax 성공했을때 내보내기
ourRequest.send();
//동적 url 페이지를 위한 변수 증가
pageCounter++;
//json 페이지가 3장이기 때문에 버튼을 3번 이상 클릭하면 다시 1로 값을 초기화 시켜 주기
if(pageCounter>3){
pageCounter=1;
}
});
//json 데이터를 가공해서 html에 붙여 주기
function renderHTML(data){
var htmlString ="";
//이중for 문으로 json 배열에 담긴 객체 데이터와 그 객체 안에 있는 배열 데이터 출력
for(i=0; i<data.length;i++){
htmlString += "<p>" + data[i].name + "는" + data[i].species +" that likes to eat";
for(ii=0; ii<data[i].foods.likes.length; ii++){
//첫번째 foods.likes 아이템이면 그냥 출력
if(ii==0){
htmlString += data[i].foods.likes[ii];
}else{
//두번째 아이템 부터
htmlString += " and "+data[i].foods.likes[ii];
}
}//--두번째 객체안에 키:value 배열 likes for 문 끝
htmlString += ' and dislikes ';
for(ii=0; ii<data[i].foods.dislikes.length; ii++){
//첫번째 foods.dislikes 아이템이면 그냥 출력
if(ii==0){
htmlString += data[i].foods.dislikes[ii];
}else{
//두번째 아이템 부터
htmlString += " and "+data[i].foods.dislikes[ii];
}
}//마지막 객체안에 키:value 배열 dislikes for 문 끝
} //--첫번째 배열 안에 객체 뽑아내기 for 문 끝
htmlString += '.</p>';
//div 객체에 붙이기
animalContainer.insertAdjacentHTML('beforeend',htmlString);
}
//------------------------------참고-----------------------------------------------
//자바스크립트 객체
//선언 var = myCat = {"key":"value"}
//접근 myCat.key
//자바스크립트 배열
//선언 var myFavColors = ["blue","green","purple"]
//접근 myFavColors[1]
// 합체
// var thePets = [
// {
// "key1":"value1" ,
// "key2":"value2"
// },
//
// {
// "key1":"value1" ,
// "key2":"value2"
// }
// ]
//접근 thePets[1].key1;
#json-1.json
[
{
"name": "Meowsy",
"species": "cat",
"foods": {
"likes": [
"tuna",
"catnip"
],
"dislikes": [
"ham",
"zucchini"
]
}
},
{
"name": "Barky",
"species": "dog",
"foods": {
"likes": [
"bones",
"carrots"
],
"dislikes": [
"tuna"
]
}
},
{
"name": "Purrpaws",
"species": "cat",
"foods": {
"likes": [
"mice"
],
"dislikes": [
"cookies"
]
}
}
]
#json-2.json
[
{
"name": "Whiskers",
"species": "cat",
"foods": {
"likes": [
"celery",
"strawberries"
],
"dislikes": [
"carrots"
]
}
},
{
"name": "Woof",
"species": "dog",
"foods": {
"likes": [
"dog food"
],
"dislikes": [
"cat food"
]
}
},
{
"name": "Fluffy",
"species": "cat",
"foods": {
"likes": [
"canned food"
],
"dislikes": [
"dry food"
]
}
}
]
#json-3.json
[
{
"name": "Kitty",
"species": "cat",
"foods": {
"likes": [
"fresh food"
],
"dislikes": [
"stale food"
]
}
},
{
"name": "Pupster",
"species": "dog",
"foods": {
"likes": [
"tomatoes",
"peas"
],
"dislikes": [
"bread"
]
}
},
{
"name": "Tux",
"species": "cat",
"foods": {
"likes": [
"fancy dishes"
],
"dislikes": [
"basic cat food"
]
}
}
]
자료 출처:https://learnwebcode.github.io/json-example/animals-1.json
https://learnwebcode.github.io/json-example/animals-2.json
https://learnwebcode.github.io/json-example/animals-3.json
반응형
'PHP 박살내기 > php ajax json' 카테고리의 다른 글
| php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기) (3) | 2017.09.14 |
|---|---|
| php ajax json을 이용해서 crud(삭제) 예제4 (3) | 2017.09.13 |
| php ajax json을 이용해서 crud(수정) 예제3 (1) | 2017.09.12 |
| php ajax json mysql을 이용해서 crud(추가) 예제2 (1) | 2017.09.12 |
| php ajax json mysql을 이용해서 crud(조회) 예제1 (889) | 2017.09.11 |
댓글