jQuery ajax와 콜백 callbacks 활용하기

js API/jquery 2012. 4. 30. 13:33

jQuery ajax와 $.Callback() 함수를 활용하기



$('#list').fusionAjaxRecord 를 통해 ajax 통신을 마친 후
외부 함수인 prints 로 데이타를 전송한다.


외부 함수 prints 의 obj 는 #list 를 리턴받은 값이고

외부 함수prints 의 data는 ajax를 통해 돌려받은 데이타값을 리턴받는 값이다



# @ 외부 함수인 prints 함수를 ajax 통신이 마친 후 호출 및 데이타 전송

< script type="text/javascript">
$(document).ready(function()
{
	// obj : html 아이디 및 클래스 elementTag
	function prints(obj,data){
		$.each(data, function(key,state)
		{
			// 값 처리
		});
	}
	
	$('#list').fusionAjaxRecord({
		'filename':'./modules/test_view.php',
		'data':{
                         'tname':'bbs_notice',
		         'current_record':'1'
                 }
	}, prints);
});
< /script>







@# 전체소스 /==========================================================

< script>
jQuery(function($) 
{
	/**
	@prints : 외부 함수 function prints(){}
	function prints(obj, data){
	}
	
	$('#list').fusionAjaxRecord({
		'filename':'./modules/bbs_view.php',
		'data':{
				page:1,
				uid:10
		}
	}, prints);
	*/
	$.fn.fusionAjaxRecord= function(params,callMethod)
	{
		var targetID = $(this);
		var callbacks = $.Callbacks();
		var callFunction =callMethod;

		var param = $.extend({
			filename : null,
			data : ''
		},params||{});

		$.ajax({
			type: "post",
			url: param.filename,
			cache: false,
			dataType :'text',
			data :param.data,
			success: function(data, status)
			{
				var json = eval("(" + data + ")");				
				if(typeof(json.result) != 'undefined')
				{
					if(json.result == 'false')
						alert(json.msg);
					else{
						callbacks.add(callFunction);
						callbacks.fire(targetID,json);
					}
				}
			},
			error: function(data, status, errorThrown){
				alert(data.responseText+' '+status+' '+errorThrown);
			}
		});
	}
});
< /script>



jquery json IE, Opera 등 parse error 발생 할때

js API/jquery 2012. 3. 15. 11:02
우리는 jquery 를 이용해서 서버와의 통신을 자주 하게 됩니다.
그런데 dataType : 'json'  으로 ajax 통신을 할때

크롬을 제외한 IE 등에서 parse error 를 발생합니다.
정말 난감할 뿐만 아니라 어처구니가 없는거죠

jquery 가 잘 만들어 졌지만 브라우저 마다 처리 방법들이 조금씩 다르다 보니
모두 호환 되도록 하는 방법 밖에 없는 것 같습니다.

그리하여 해결 방법은 이렇습니다.

@ Javascript /=====================================
< script >
function jsonAjax(uid)
{

   $.ajax({
    type: "post",
    url: "./test_json.php",
    cache: false,
    dataType :'text',
    data: {'uid':uid},
    success: function(data, status){
           var json = eval("(" + data + ")");
         // OR  var json =$.parseJSON(data);
           
	  if(typeof(json.result) != 'undefined')
	  {
		if(json.result != ''){
			alert(json.result);
		}else{
			$("#list_loop").empty(); //초기화
			$.each(json.msg, function(key,state) {
				$("#list_loop").append('
'+state["userid"]+' ('+state["name"]+')
'); }); } } }, error: onError }); return false; } function onError(data, status, errorThrown){ alert(data.responseText+' '+status+' '+errorThrown); } < /script >


@ PHP /============================================
<?php
# 회원정보 루프 배열 값
$loop[0] = array(
    'userid' => 'test1id',
    'name'  => '홍길동'
);

$loop[1] = array(
    'userid' => 'test1id',
    'name'  => '홍길동'
);


# json 최종결과
$args = array(
    'result' => 'ok',
    'msg'   => $loop
);

echo json_endcode($args);
exit;
?>

@ HTML /===========================================
< div id="list_loop"> 여기에 내용 결과 출력 < /div >



1. jquery를 이용한 ajax 통신을 할때 dataType 를 text 로 합니다.
2. text 값으로 받은 값을 eval 를 통해 json 데이타로 변환 한다.