[JQUERY] AJAX관련 정리

get, post 사용하기

아래는 id 가 dataarea 인곳에 source.html 파일을 로딩하는 것이다. 이후는 dataarea를 처리하여 보기 좋게 포맷을 한다. 단 상기는 고정으로 된 것이지만 보통 웹을 꾸밀때는 자료를 주고 받음으로서 다른 결과값을 유도한다.

load (다른 문서를 비동기식으로 불러오기)

참조 http://api.jquery.com/load/

 $(div).load('document.html');
 $("#dataarea").load("source.html", function(data) {
    
 }

get 사용하기

$.get("proc.php", {id:"userid", pass:"userpwd"}, function (data){ 
    console.log(data);
});

post 사용하기

$.post("proc.php", {name:"userid",pass:"userpwd"}, function (data){ 
    console.log(data); 
});

Get과 Post의 모양은 글자모양이 다른 것을 제외하고는 똑 같다.

하기처럼 넘길 필드가 많을 경우 serialize를 사용

function getVocabularyList(init){ 
    $.post("sample.php?"+$("#formid").serialize(), {}, function (data){ }); 
} 

function getVocabularyList(init){ 
    $.post("sample.php, $("#formid").serialize(), function (data){ }); 
} 
// 혹은 아래처럼 
$.post("/admin/thereview/wp_ajax_list", {ajax:"true", syear:syear, sweek:sweek}, function (data){ 
    $('#WP_innerHTML').html(data); 
});

json으로 데이타 받은후 처리하기

<script>
$.getJSON("${pageContext.request.contextPath}/getJson.do",
    {
        ln:"50",
        sn:"1",
    },
    function(data) {
        $.each(data.result, function(i,item){
        console.log(item.name);
        });
    });
</script>

getJson 을 Post 방식으로 사용하기

postJSON이라는 별도의 함수를 만든후 사용하게 된다.

$.postJSON = function(url, data, func) { 
    $.post(url+(url.indexOf("?") == -1 ? "?" : "&")+"callback=?", data, func, "json"); 
}  

아래는 postJSON을 사용한 샘플 소스

<form name="testFrm">
  <input type="hidden" name="test1" value="111" />
  <input type="hidden" name="test2" value="222" />
  <input type="hidden" name="test3" value="333" />
</form>      

<script type="text/javascript">
  function getData(){
    var paramData = $("#testFrm").serialize();   
    $.postJSON(url, paramData, function (data) { 
      $.each(data, function(index,jsonData){
        //jsonData의 값을 처리.~~
      });
    });
  }
</script>

AJAX

"$('a.ajax-popover').popover({
  html: true,
  trigger: 'hover',
  placement: 'auto',
  title: $(this).attr('rel'),
  delay: { show: 200, hide: 1800 },
  content: function() {
  var cid = $(this).attr('rev');
  var div_id = ""tmp-id-"" + $.now();
  $.ajax({
    url: '/clubs/'+cid,
    cache: true,
    type: 'GET',
    dataType: ""json"",
    success: function(data) {
      if (data.success) {
        var content = data.title + data.content;
        $('#'+div_id).html(content);
      }
    }
  });
  return '<div id=""'+div_id+'"">로딩중...</div>';
  }
});

jquery로 파일 다운로드 받기

아래는 제가 사용하는 간단한 소스입니다.

function ajaxdown(updir, gid, bid, tid){ 
  var url = "/board/main/filedownload/"+gid+"/"+bid+"/"+tid; 
  var inputs ='<input type="hidden" name="filename" value="'+ updir +'" />'; 
  jQuery('<form action="'+ url +'" method="post">'+inputs+'</form>')
  .appendTo('body').submit().remove();
}

function getCategory(v, step) {
  if(step == 1) $(\"#Category2\").removeOption(/./);
  else if(step == 2) $(\"#Category3\").removeOption(/./);
    $.ajax({
      type: \"GET\",
      url: \"./product/search_category.php\",
      data: \"value=\"+v.value+\"&step=\"+step,//특정변수값을 주어서 결과를 받을때
      dataType: \"xml\",
      success: function(xml) {
        $(xml).find(\'channel\').each(function(){
          var cat_no = $(this).find(\'cat_no\').text();
          var cat_name = $(this).find(\'cat_name\').text();
          if(step == 1) $(\"#Category2\").addOption(cat_no, cat_name, false);
          else if(step == 2) $(\"#Category3\").addOption(cat_no, cat_name, false);	
          
        }); //close each(
      }//close function(xml)
    }); //close $.ajax(
}