jquery, ajax

ajax를 이용해서 json 배열 받기 예제

이상욱1 2015. 4. 7. 22:16

ajaxjson.html 부분 

<!DOCTYPE html>


<html>


<head>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>


<script>


$(document).ready(function(){


jQuery.ajax({


type:"post",


url: "./arrayjson.html",//"./test.html",


data:"name=junho",


dataType:"JSON",


success: function(data){


//alert(data);



/* var items =[]; */


$.each(data, function(){


//alert(this["name"]);


// 한줄은 되는데 배열은 오류가 난다 



alert(this.id);


alert(this.name);


alert(this.price); 

alert(this.description); 


/* items.push(val);


alert(val);

 */

});


},


complete: function(data){



},


error:function(xhr, status , error){


alert("에러발생");


}



})


})




</script>






<meta charset="EUC-KR">


<title>Insert title here</title>


</head>


<body>




</body>


</html>









arrayjson.html 부분 

[

  {

    "id": "1",

    "name": "레몬",

    "price": " 3000",

    "description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다."

  },

  {

    "id": "2",

    "name": "키위",

    "price": " 2000",

    "description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다."

  },

  {

    "id": "3",

    "name": "블루베리",

    "price": " 5000",

    "description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다."

  },

  {

    "id": "4",

    "name": "체리",

    "price": " 5000",

    "description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다."

  },

  {

    "id": "5",

    "name": "메론",

    "price": " 5000",

    "description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다."

  },

  {

    "id": "6",

    "name": "수박",

    "price": "15000",

    "description": "수분이 풍부한 과일이다."

  } 

]