[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();
}

<script>
<!--
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(

} //close $(
//-->
</script>