ajax 3 좋아요 기능 넣기

생각하면 쉬울 것 같은데 설계하려니까 어려웠던 좋아요 기능

like_table 생성(좋아요를 체크하는 테이블)
/ board_table에 like_count 컬럼 추가(좋아요 수를 저장하는 컬럼)
게시글 상세 조회 시 로그인한 회원의 아이디값
(또는 고객번호)을 넘겨 like를 한 적이 있는 지 조회해야 한다.
: 이미 좋아요를 눌렀다면 채워진 좋아요
이미지를 출력해야 하기 때문에
좋아요를 클릭 했을 때 아이디(회원번호)가 db에 좋아요
이력이 없다면 insert를, 있다면 좋아요를 취소하기 위해
delete를 한다.
좋아요 이미지 옆에 게시글의 좋아요 합계를 계산하여
좋아요를 누를때마다 새로고침을 해 정보를 받아온다.

data base

create table board_table(
b_number bigint auto_increment,
cate_number int,
m_id varchar(20),
b_title varchar(20) not null,
b_contents varchar(1000) not null,
b_date datetime not null,
b_hits int default 0,
b_filename varchar(100),
like_count int default 0,

 constraint primary key (b_number),
 constraint foreign key(m_id) references member_table(m_id)  on delete cascade,
 constraint foreign key(cate_number) references category_table(cate_number)
    );

create table like_table (
like_number bigint auto_increment,
m_id varchar(20),
b_number bigint,
like_check int default 0,

constraint primary key (like_number),
constraint foreign key(m_id) references member_table(m_id) on delete cascade,
constraint foreign key(b_number) references board_table(b_number) on delete cascade
);

jsp
로그인을 했는 지 세션값을 활용해 체크

<body>
<c:if test="${sessionScope.loginId == null || sessionScope.loginId eq 'guest'}">
	<img src="/resources/img/좋아요전.png" id="likeimg" width="60px" height="60px"
		class="rounded-circle mt-2">
		${b.like_count} <br><br>
	추천 기능은 <a href="/member/login" type="button" id="newLogin"
	class="btn btn-outline-success">로그인</a> 후 사용 가능합니다.
	</c:if>
	<c:if test="${sessionScope.loginId != null}">
		<div>
	<input type="hidden" id="like_check" value="${like.like_check}">
	<img class="rounded-circle likeimg" id="likeimg" src="/resources/img/좋아요전.png"
	width="60px" height="60px"> ${b.like_count}
	</div>
	</c:if>
    </body>

게시글 상세 조회에 들어오자마자 아이디 체크!
$(document).ready(function ()
: 문서 구조가 만들어 지면 실행되는 이벤트
어떤 좋아요를 보여줄까?

<script>
$(document).ready(function () {
	let like_count = document.getElementById('like_count')
	let likeval = document.getElementById('like_check').value
	const b_number = '${b.b_number}';
	const m_id = "${sessionScope.loginId}";
	const likeimg = document.getElementById("likeimg")

	if (likeval > 0) {
		likeimg.src = "/resources/img/좋아요후.png";
	}
	else {
		likeimg.src = "/resources/img/좋아요전.png";
	}
    // 좋아요 버튼을 클릭 시 실행되는 코드
$(".likeimg").on("click", function () {
	$.ajax({
      url: '/board/like',
      type: 'POST',
      data: { 'b_number': b_number, 'm_id': m_id },
      success: function (data) {
          if (data == 1) {
              $("#likeimg").attr("src", "/resources/img/좋아요후.png");
              location.reload();
          } else {
              $("#likeimg").attr("src", "/resources/img/좋아요전.png");
              location.reload();
          }
      }, error: function () {
          $("#likeimg").attr("src", "/resources/img/좋아요후.png");
          console.log('오타 찾으세요')
      }

  });

  });
  });
     </script>

매일 헷갈리는 것!
#ID명 (선언자 : #) .CLASS명 (선언자 : . )

<배운 것>
제이쿼리에서 id class name 값 가져오기

id 가져오기
let valueById = $('#inputId').val();
class 가져오기
let valueByClass = $('.inputClass').val();
name 가져오기
let valueByName = $('input[name=inputName]').val();

어떤 속성 값을 가져오기 & 제어하기

id가 test인 value 속성 값을 가져옴
$('#test').attr('value')

id가 test인 속성의 src를 '/resources/img/img.png'로 바꾸기
$('#test').attr('src','/resources/img/img.png')

id가 test인 disabled 속성을 제거하기
$('#test').attr('disabled','')

location.reload(); - 새로고침

그리고 에러 났던 것!
success : funtion()에 ajax로 담아 온 값을
result로 적었더니 계속 오류가 났다.
data로 담으니 잘 되었다. 왜징??
검색해봐도 잘 안나와서 나중에 다시 찾아볼 것!

Author And Source

이 문제에 관하여(ajax 3 좋아요 기능 넣기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hellocdpa/좋아요-기능-넣기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

ajax 3 좋아요 기능 넣기

Author And Source

좋은 웹페이지 즐겨찾기