[ajax] json으로 DB접속해 배열데이터 주고받기

이 블로그를 왜 만들었는지 까먹기 전에 혼자 끄적거려보는 포스팅.ㅋㅋㅋ

철저히 내위주의 설명..이므로 난이도는 완전 하하ㅎ..ㅏ....

페이지 전환이 없이도 실시간으로 DB와 연동하여 데이터를 검색, 변경, 삭제 할 수 있는 ajax!

그 중에서도 배열로 된 데이터를 받아오는 방법에 대하여 설명하겠슴니댜..

기본적으로 DB와는 connect상태. 페이지에서 쿼리문을 날릴 수 있는 상태여야함.ㅋㅋ

데이터를 불러올 페이지인 test.php

<div id="test"><input type="button" value="push" class="click-btn"></div> <script type="text/javascript"> $(function() { $('.click-btn').click(function() { //push버튼을 클릭하면 변수들을 정의하고 ajax시작! var ids = $(this).parent().attr("id"); var sfl = "전송시킬내용1"; var stx = "전송시킬내용2"; var tot = "전송시킬내용3"; //alert(ID); $.ajax({ //ajax start! type: "POST", //전송방식 POST와 GET 중에 하나 url: "./ajax.test.php", //ajax를 실행할 파일 경로 data: { "tot" : tot, "sfl": sfl, "stx" : stx }, //전송방식이 POST일 경우에 전송할 데이터들을 나열해준다 dataType: "json", cache: false, success: function(data){ //전송성공! console.log(data); //콘솔창에 데이터 찍어보기(배열 데이터가 출력됨) var htmls = ""; data.forEach(function(element, indes, array) { htmls += "<a href='"+element.urls+"'><article class='mo-index-tab-content-in'><span class='mo-index-tab-content-in-condition'>"+element.istatus+"</span>"; htmls += "<div class='mo-index-tab-content-in-star'>"; htmls += star+"</div>"; htmls += "<p class='mo-index-tab-content-in-gu'>"+element.addr+"</p><p class='mo-index-tab-content-in-name'>"+element.ca_name+"</p>"; htmls += "<p class='mo-index-tab-content-in-description'>"+element.wr_subject+"</p><span class='mo-index-tab-review'>리뷰 : <b>"+element.comment+"</b></span>"; htmls += "<img src='"+element.img+"' alt='추천아파트' /></article></a>"; }); $(".morebox").before(htmls); if(tot > nextID) { $(".morebox").attr("id","more"+nextID); //다음 limit 걸어줄 숫자 버튼id로 수정해주기 }else{ $(".morebox").remove(); } } }); }); }); </script>

그리고 ajax로 실행시킬 ajax.test.php

<?php header("content-type:text/html; charset=utf-8"); //charset 지정 //POST로 불러온 값들을 변수로 변경! $tot=$_POST['tot']; $sfl = $_POST['sfl']; $stx = $_POST['stx']; $sql = "select * from test_tbl where tot = '{$tot}' and sfl = '{}' and stx = '{}' order by idx desc limit 0,10"; //db에서 검색할 select문 $result = mysql_query($sql); for($i=0;$row=mysql_fetch_array($result);$i++) { //검색 완료한 데이터를 배열로 집어넣기! $list[] = array("cate"=>$row[cate], "subject"=>$row[subject], "comment"=>$row[comment]); } echo json_encode($list);

받아온 값을 활용해 html태그로 집어 넣을 수도 있다.