BBS > jqeury

ajax 통신 로딩중 이미지 처리

작성자 : 이창우 (x1wins) | 등록일 : 2011-11-03 | 목록
첨부 파일이 없습니다.
첨부 이미지가 없습니다.
<!-- Ajax 로딩시 이미지 출력 영역 -->
<div id="ajax_indicator" style="display: none">
	<p
		style="text-align: center; padding: 16px 0 0 0; left: 50%; top: 50%; position: absolute;">
		<img src="${pageContext.request.contextPath}/images/viewLoading.gif" />
	</p>
</div>


<script>
	$.ajax({
		url : "${pageContext.request.contextPath}/bbs/list/${bbsname}/${page}/json",
		dataType : "text",
		beforeSend: function() {
		     //통신을 시작할때 처리
		     $('#ajax_indicator').show().fadeIn('fast'); 
		},
		complete: function() {
		     //통신이 완료된 후 처리
		     $('#ajax_indicator').fadeOut();
		},
		success : function(data) {
			//통신완료 후 처리
			json = eval("(" + data + ")");
			var html;
			
			if(json.list.length==0){
				html = '<td colspan=\"5\" align=\"center\">등록된 데이타가 없습니다.</td>';
				$('#bbs').append(html);
			}else{
				$.each(json.list, function(key,value){
	
					obj = value;
					html = '<tr>'+'<td>'+obj.num+'</td>'+'<td>'+obj.subject+'</td>'+'<td>'+obj.username+'</td>'+'<td>'+obj.regdate+'</td>'+'<td>'+obj.readcnt+'</td>'+'<tr>';
					$('#bbs').append(html);
				});
			}
			
		}
	});
</script>
// 로딩이미지의 위치 및 크기조절	
$('#viewLoading').css('position', 'absolute');
$('#viewLoading').css('left', $('#loadData').offset().left);
$('#viewLoading').css('top', $('#loadData').offset().top);
$('#viewLoading').css('width', $('#loadData').css('width'));
$('#viewLoading').css('height', $('#loadData').css('height'));
로그인 하셔야 댓글을 사용하실수 있습니다.
댓글쓰기를 누르면 로그인 페이지로 이동 후 돌아옵니다.
총 댓글 겟수 0
번호 제목 등록일 작성자 조회수
662 JQuery date 타입 (0) 2014-03-20 이창우 2655
564 spring form with ajax (0) 2012-08-02 이창우 2409
-> ajax 통신 로딩중 이미지 처리 (0) 2011-11-03 이창우 6237
369 jquery json parsing 배열 예제 (1) 2011-11-03 이창우 11942
367 jqeury json paring (0) 2011-11-02 이창우 2650
366 jquery xml parsing (0) 2011-11-02 이창우 4328
125 gallery (0) 2011-05-25 이창우 2534
124 Banner menu 배너 매뉴 (0) 2011-05-25 이창우 2620
< 1 >
글쓰기 검색