jQuery

https://developers.google.com/speed/libraries#jquery

Memberform.jsp

아이디 필수항목으로 지정

	function validcheck(){
		// 필수 항목 입력 확인
		var id = document.querySelector("#userid").value;
		if(id.length!=0){
			
			
		}else{
			alert("아이디 필수");
			event.preventDefault();
		}
	}

====> jQuery변경.

$(document).ready(function(){
	
	//onsubmit="validcheck()"이거랑 같음.
	$("form").on("submit",function(){
		var id = $("#userid").val();
		if(id.length != 0){
			
		}else{
			alert("아이디 필수")
			event.preventDefault();
		}
	});
});

비번 일치 불일치

function pwcheck(){
	  var pw = document.querySelector("#passwd").value;
	  var pw2 = document.querySelector("#passwd2").value;
	  var mesg = "비번 일치";
	  if(pw != pw2){
		  mesg = "비번 불일치";
	  }
	  document.querySelector("#result2").innerText=mesg;
  }

======>jQuery

//비번체크
	$("#passwd2").on("keyup",function(){
		var pw = $("#passwd").val();
		var pw2 = $("#passwd2").val();
		var mesg = "비번일치";
		if(pw != pw2){
			mesg = "비번 불일치";
		}
		$("#result2").text(mesg);
	});

이메일 선택시 자동으로 값이 들어가게 해주는 로직

//이메일 선택
	$("#emailSelect").on("change",function(){
		console.log(this, $(this),$(this).val());
        //this는 select자체를 의미함.= javascript 객체. %(this)는 jQuery객체
		var email = $(this).val();
		$("#email2").val(email);
	});

아이디중복체크

var httpRequest;
function req(){
	httpRequest = new XMLHttpRequest();
	console.dir(httpRequest);
	
	//요청시 응답처리하는 함수 호출
	httpRequest.onreadystatechange=responseFun;

	//////////////////////
	var id = document.querySelector("#userid").value;
	
	/////////////////////
	httpRequest.open("get","MemberIdCheckServlet?userid="+id,true);  // 나중에 스프링에서는 jsp 요청 불가능하다.
	httpRequest.send(null);  // get방식이면 null지정
}	

function responseFun(){
    if(httpRequest.readyState==4 && httpRequest.status == 200){
    	var data = httpRequest.responseText;
    	console.log(data);
    	document.querySelector("#result").innerText=data;
    }
}

=>>>jQuery

	//아이디 중복체크-Ajax 이용
	$("#userid").on("keyup",function(){
		
		$.ajax({
			url:'idCheck', //Controller의 요청맵핑값 (구현 안했던것.)
			type:'get',
			data:{
				userid:$("#userid").val()
			},
			dataType:'text', //응답 데이터 타입. mesg = "아이디사용가능", "아이디 중복" =>문자열로 하지말고 Y,N이런걸로 해야한다. 이유는? 멀라
			success:function(responseData, status, xhr){
				$("#result").text(responseData);
			},//responseData=responseText
			error:function(xhr, status, e){
				console.log("Error:"+e)
			}
				
			
			
		});//ajax사용.
		
		
	});//end 아이디 중복체크

memberController

//produces, consumes 두가지가 있다. produce는 값을 넘겨줄때 어떤 타입으로 넘기는지 consumes는 받을때 어떤 타입으로 받는지 설정해준다.

//produces, consumes 두가지가 있다. produce는 값을 넘겨줄때 어떤 타입으로 넘기는지 consumes는 받을때 어떤 타입으로 받는지 설정해준다.
	@RequestMapping(value="/idCheck", method=RequestMethod.GET, produces = "text/plain;charset=utf-8")
	@ResponseBody
	public String idCheck(@RequestParam("userid") String userid) throws Exception {
		MemberDTO dto = service.idDuplicateCheck(userid);
		String mesg = "아이디 사용 가능";
		if(dto != null) {
			mesg = "아이디 중복";
		}
		
		return mesg;
	}

memberForm.jsp

	//아이디 중복체크-Ajax 이용
	$("#userid").on("keyup",function(){
		
		$.ajax({
			url:'idCheck', //Controller의 요청맵핑값 (구현 안했던것.)
			type:'get',
			data:{
				userid:$("#userid").val()
			},
			dataType:'text', //응답 데이터 타입. mesg = "아이디사용가능", "아이디 중복" =>문자열로 하지말고 Y,N이런걸로 해야한다. 이유는? 멀라
			success:function(responseData, status, xhr){
				$("#result").text(responseData);
			},//responseData=responseText
			error:function(xhr, status, e){
				console.log("Error:"+e)
			}
				
			
			
		});//ajax사용.
		
		
	});//end 아이디 중복체크
	
});

responseData가 요청맵핑에 해당하는 컨트롤러 메서드 리턴값을 받아온다.

function validcheck(){
	// 필수 항목 입력 확인
	var id = document.querySelector("#userid").value;
	if(id.length!=0){
		
		
	}else{
		alert("아이디 필수");
		event.preventDefault();
	}
}

//jQuery
$(document).ready(function(){
	$("form").on("submit",function(){
		var id = $("#userid").val();
		var pw = $("#passwd").val();
		
		if(id.length == 0){
			alert("id 입력 필수")
			$("#userid").focus();//커서 아이디에 깜빡이게 두는 함수.
			event.preventDefault();
		}else if(pw.length == 0){
			alert("pw 입력 필수")
			$("#passwd").focus();
			event.preventDefault();
		}
	});
});

cartList

장바구니 전체선택/해제

 function allCheck(){
		var allCheck = document.querySelector("#allCheck");
		console.log(allCheck.checked);
		
		var chk = document.querySelectorAll(".check");  // 
		chk.forEach(function(data,idx){	
			console.log(idx, data);
			data.checked=allCheck.checked;
		});
}

=>>>>jQuery

//jQuery
 $(document).ready(function(){
	 //allCheck
	 $("#allCheck").on("click",function(){
		 var result = this.checked;
		 console.log(result);
		 $(".check").each(function(idx,data){
			 this.checked = result;
		 });
	 });
 });
 

$(".check") = 개별 장바구니 체크하는 부분을 의미.

장바구니삭제

 function delCart(num){
 	event.preventDefault();
 	console.log("delCart", num);
   	location.href=`goodsCartDel?num=\${num}`;
// 	location.href="goodsCartDel?num="+num;
 	
 }

======>

	 //delCart
	 //<input type="button" value="삭제" data-xxx="${dto.num}">
	 $(".delCart").on("click",function(){
		 var num = $(this).attr("data-xxx")//attr 태그 속성얻기.
		 console.log(num);
		 $.ajax({
			 url:'goodsCartDel2',
			 type:"get",
			 data:{
				 num:num
			 },
			 dataType:'text'
			 success:function(responseData, status, xhr){
				 console.log(">>>",$(this));//this = ajax객체
				 delCart.parents().filter("tr").remove();
			 },
			 error:function(xhr, status, e){
				 console.log("Error:", e)
			 }
		 });
	 });