• HTML
  • JS
  • J볃교

더보기 클릭시 내용더 불러오기

2019-05-24 798

설명

  • 카카오톡 링크

게시판이나 내용이나 상품이나 내용을 더 불러오기 위한 소스입니다~!

예제 사이트

※ajax 안에 ajax 를 사용하여 정상적으로 작동하지 않습니다. 위에있는 예제 사이트 참고 부탁드리겠습니다~!

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style type="text/css">
	.invest_list {font-size:0; text-align:center}
	.invest_box {display:inline-block; width:31.333%; height:50px; padding-bottom:25%; margin-left:3%; background-color:#f2849e; border-radius:5px; margin-bottom:3%}
	.invest_box.invest_item1 {margin-left:0}
	.txt_center {text-align:center}
	.invest_plus {display:inline-block; width:180px; height:48px; line-height:46px; background-color:#f2849e; color:#fff; border-radius:5px; }
	.loading_img {display:none}
	.loading_img.on {display:block}
</style>

<div class="invest_list">
	<div class="invest_box invest_item1">
	</div>
	<div class="invest_box invest_item2">
	</div>
	<div class="invest_box invest_item3">
	</div>
</div>

<div class="loading_img txt_center">
	<img src="/img/invest_loading_img.gif" alt="로딩이미지" title="로딩이미지" />
</div>

<div class="load_btn_box txt_center">
	<a href="javascript:;" class="invest_plus">더 불러오기</a>
</div>


<script type="text/javascript">
	var maxlength = 2;
	var start_number = 0;

	$(".invest_plus").on("click", function() {
		start_number = start_number + 1;
		if(start_number > maxlength) {
			return false;
		}
		$(".loading_img").stop().fadeIn("fast");
		$(".load_btn_box").fadeOut("fast");
		$.ajax({
			url: './ajax_invest_list.php', //주소
			type: 'post', // get 또는 post 방식으로
			data: {
				// 보낼 데이터
			},
			success : function(data, status, xhr) { 
				//성공시 동작
				
				$(".invest_list").append(data);
				$(".loading_img").stop().fadeOut("fast");
				if(start_number >= maxlength) {
					$(".load_btn_box").fadeOut("fast");
					return false;
				}
				$(".load_btn_box").fadeIn("fast");
				
			},

			fail: function(error) {
				// 실패 시 동작
			},
			always: function(response) {
				// 성공하든 실패하든 항상 할 동작
			}
		});
	});

	/*  ajax_invest_list.php 내용

	<div class="invest_box invest_item1">
	</div>

	<div class="invest_box invest_item2">
	</div>

	<div class="invest_box invest_item3">
	</div>
	
	*/
</script>