[spring/jQuery/ajax] DB변경+문구 변경 버튼

...

중고 골프용품 spring mvc 프로젝트를 하면서
버튼이 하나 필요했다..

1. 거래전 -> 거래중 상태로 mfg_deal테이블의 state컬럼을 DB에서 변경시키고
2. 거래전 -> 거래중 이라는 문구를 input 버튼에 표시하고
3. [거래중] 상태가 되면, 같은 view화면에 있는 채팅하기/결제하기 버튼을 disabled시키는

버튼을 만들어야 했다..

mapper.xml

1. 거래전 -> 거래중 상태로 mfg_deal테이블의 state컬럼을 DB에서 변경시키기 위해

update쿼리문을 사용해서 state컬럼 값 변경해준다.

	<!-- 거래전->거래중 버튼  -->
<update id="AfterDeal">
	update mfg_deal
	set state = '거래중'
	where deal_num = #{deal_num}
</update>
<!-- 거래전->거래중 버튼  -->

<!-- 거래중->거래전 버튼 -->
<update id="BeforeDeal">
	update mfg_deal
	set state = '거래전'
	where deal_num = #{deal_num}
</update>
<!-- 거래중->거래전 버튼 -->

Controller.java

ajax 전용 Controller라고 한다.. 역할이 다르다는데...더 찾아봐야겠다.. @RestController
@ResponseEntity도 ..

@RestController
public class AjaxController {
	

	private static final Logger log 
							= LoggerFactory.getLogger(AjaxController.class);
	@Inject
	private ProductService service;
	
	//-------------------------상품 상세페이지: 거래전->거래중  // 거래전->거래후---------------------------------
		@ResponseBody
		@RequestMapping(value="/product/BeforeAndDealing",method=RequestMethod.POST,produces = "application/text; charset=UTF-8")
		public ResponseEntity<String> BeforeAndDealing(DealVO dvo,HttpSession session, Model model,@RequestParam("state") String state) throws Exception{
			log.info("AfterDealPOST 실행 @@@@@@@@");
			
			log.info("dvo : " + dvo);
			log.info(state);
			
			String result = service.BeforeAndDealing1(dvo);
			
			log.info(result+"############");
			
			ResponseEntity<String> entity = new ResponseEntity<String>(result, HttpStatus.OK);
			
			return entity;
					
			
		}
	//-------------------------상품 상세페이지: 거래전->거래중  // 거래전->거래후---------------------------------
}

	

ServiceImpl.java

	@Override
	public String BeforeAndDealing1(DealVO dvo) throws Exception {
		log.info("BeforeAndDealing1(DealVO dvo)");
		return dao.BeforeAndDealing1(dvo);
	}

DAOImpl.java

//거래중 -> 거래후
	@Override
	public String BeforeAndDealing1(DealVO dvo) throws Exception {
		log.info("DAOImpl: BeforeAndDealing1(DealVO dvo)호출");
		
		log.info("여기는 DAOImpl~~~~"+dvo.getState());
		log.info(dvo+"dvo야~~~");
		
		if(dvo.getState().equals("거래전")) { //거래전 -> 거래중
			
			sqlSession.update(NAMESPACE + ".AfterDeal", dvo);
		}
		if(dvo.getState().equals("거래중")){ //거래중->거래전
			
			sqlSession.update(NAMESPACE + ".BeforeDeal", dvo);
		}
			String state =  sqlSession.selectOne(NAMESPACE+".getState",dvo);
			log.info(state);
		
		return state;
	}

shopDetails.java(View)

$('#요소id값').html(input태그 전체 js코드로 불러오면서 value=""부분에 data전달)
하는 형태를 사용하면서 => 2. 거래전 -> 거래중 이라는 문구를 input 버튼에 표시

disabled를 false로 -> 활성화되게 !
disabled를 "disabled"로 -> 비활성화되게 !

왜 그냥 단순 true, false로는 안먹히는지 모르겠으나.. 굴러가기만하면 됐다...

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
        
//=======================================거래전중 변경버튼================================================
$(document).ready(function() {


		 $('#deal').click(function(){
			 var result = confirm('거래상태를 변경하시겠습니까?');
				if (result) {
					
					
			 
		 	 $.ajax({
			 		url : "/product/BeforeAndDealing",
			 		type: 'POST',
			 		data: {'state':'${deal.state}','deal_num':'${deal.deal_num}'},
			 		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
			 		success:function(data){
			 			

			 			alert("거래상태 변경완료!");
			 			//alert("성공"+data); 
/* 			 			$('#deal').val() = data;
 */	
 
 						//버튼 
 			 			$('#test').html('<input type="button" id="deal" value="'+data+
								'"  style="background:#f2f4f5; border-color: #f2f4f5; color: black;">');
 
 						//문구
 						$('#test2').html('<input type="button" id="highlight" value="'+data+
 								'" style="border: none; background-color: #FA7070; font-size: small; font-weight: bold;">');
 					
 						if(data == "거래전"){
 							$('#button').attr("disabled",false);
	 						$('#addtocart').attr("disabled",false);
 						}
 						else{
 							$('#button').attr("disabled","disabled");
	 						$('#addtocart').attr("disabled","disabled");
 						}
 						
			 		},
		 	 		error:function(data){
			 			
			 			alert("실패"+data); 
			 		}
		 	});
		 	 
		 	 
	 		} 
		 });
});


//=======================================거래전중 변경버튼================================================

</script>

3. [거래중] 상태가 되면, 같은 view화면에 있는 채팅하기/결제하기 버튼을 disabled시키기 위해
   jstl로 state로 상태구분하고
   그에 따라 disabled="disabled"를 줌

									<c:choose>
										<c:when test="${deal.state eq '거래전'}">
											<input type="button" id="button" value="채팅하기" onclick="" >
											<input type="submit" id="addtocart" value="구매하기" class="btn alazea-btn ml-15" >
										</c:when>
										<c:when test="${deal.state eq '거래중'}">
											<input type="button" id="button" value="채팅하기" onclick="" disabled="disabled">
											<input type="submit" id="addtocart" value="구매하기" class="btn alazea-btn ml-15" disabled="disabled">
										</c:when>
									</c:choose>