• [잡담/일상] ajax로 좋아요버튼 질문좀 다시..ㅠ2018.05.02 AM 02:57

게시물 주소 FONT글자 작게하기 글자 키우기

아작스..

 

 

이거 이해를 몬하겠네요... 처음접하는거라그런가...

 

설띵을 겁나 들엇는데..

 

예제 해도 이게 어떻게 오고가는지 이해가안됨..

일단 새로고침 없이 하는거라서..

 

실제로 팀에 빠요엔 1명한데도 ..

어제 저녁 마이피에서도


설명을 이렇게 받았는데요//

 -----------------------------------------

.java에다가


서버쪽은

$.ajax({
url:[매핑], type="post", data:[전송값],
success : [매핑으로 연결된 코드가 정상적으로 동작했을 때 실행될 코드]
});

 


클라이언트 쪽

@RequestMapping (value =" " )~~~~

 

 ------------------------------------------

이 두개를 하나의 .java다 쓰는건가요?

 

 

그럼

좋아요 버튼은 .jsp에 있는데 여기에는 어케 처리해야 하나요

댓글 : 17 개
아작스는 비동기 통신이지요.
뷰단에서 컨트롤러 쪽에 요청을 던지고 응답을 받아와서 그걸 받아와서 success에서 처리한다 생각하셔요.
dataType을 html이나 xml 등 상황에 맞게 응답을 받으면 되겠지요.

고로 뷰 즉 구성한 jsp페이지 내부의 스크립트 코드 쪽에 좋아요 버튼의 이벤트 처리부분 function에 ajax 코드를 쓰면 되지요 ㅎ

그리고 ajax 통신으로 불러올 서블릿 영역은 당연 java 코딩을 하셔야겠죠.
그 비동기를 이해를 못하는것 같네요..
으으...



일단은 팀원들이랑 같이하는거라 물어가면서 하는데
다들 바빠서 ;ㅅ; 답변이 아직도 안오네요..ㅠㅠ
일단 저는src에
controller.java를 만들고 이걸 서버쪽으로 사용할거같습니다


.jsp에서 controller.java 요청하고,
요기에다가 저 $.ajax ~~~ 로 응답을받고,

이미지 버튼이잇는 .jsp에서 ajax코드를 써서 처리한다는 건가요?
그렇지요ㅎ
controller.java 파일에 위에 본문에 하셨듯이 어노테이션 RequestMapping 으로 벨류값을 잡아놓으셨으니
이 벨류를 url 부분에 적어주시면 되는거지요. 그럼 거기에 해당하는 controller.java 쪽의 해당 메소드를 뒤에서 호출하는 거지요 ㅎ

ajax 에서 success 부분은 말그대로 작업이 성공됬을때 저기로 타는거에요. error function도 있으니
별도 예외처리가 필요하시면 고려해보셔도 되요

즉 정리를 하자면

1. 버튼에 물려있는 이벤트 function으로 접근
2. 이벤트 function에 작성된 ajax 부분에 접근
3. ajax를 통해 특정 url로 비동기 통신
4. 결과를 받고 그 결과에 따라 success 또는 error 쪽에서 처리

이렇게 보시면 되요ㅎ
흐어엉 ;ㅅ;
완벽하진 않지만 뭔가 알거같아요 ㅠㅠ
일단 적어보고나서 계속 해봐야겟네요..ㄷㄷ

자세한설명 감사합니다 ㅠ
ajax는 스크립트에서 쓰니까 jsp
@붙은 건 서버쪽 Java일 건데요..
그러니까 본문에 서버 클라이언트가 반대예요
아..!아아!!!!!!!!!!!!!!!!!
뭔가 알거같아요
jsp에다 어떻게 처리하는지 알아보고 다시해보겟읍니다
$.붙은건 제이쿼리입니다.
자바스크립트구요.
버튼을누르면 $.붙은걸 실행하면 url 붙은걸 호출하죠.
이건 그냥 <button oncl-ck="doit();"> 붙이시고
자바스크립트
<s-cript>
function doit(){
$.ajax...{
}
}
<//s!crip/>
당연히 제이쿼리가 로드되야 쓸수있구요
이건뭐 안알려드려도 될거 같고
같이 넘길 data같은걸 post 나 get으로 첨부 가능하구요.
해당데이터는 이왕이면 여러정보 담아서 array나 json형태로도 가능합니다.
보통 조아요를 한다면 해당하는 게시물을 no라던지 유니크한 값을 보내면 됩니다.
저는 보통 {"actione":"like","contentNo":1234} 이런식으로 해서 넘기고
송수신을 다 통일한다음에 action 값으로 해야하는걸 구분해서 동작합니다.

그리고 서버단에서 jsp든 php든 url호츨할때 전달된post/get 값을 파싱하시던지뭐 잘
나눠서 처리할거 사용하시고 그리고
해당 호출 url을 json형식으로 출력(리턴)하시면
$.ajax의 success(_data) 로 돌려받아 또 처리가 성공했는지 실패했는지
(통신실패는 아예 fail로 빠지니 이경우 url호출은 성공했으나 내부 처리에 실패했을경우)
로 사용하시면 됩니다.
우선 클라이언트쪽 ajax는 만질것도 없이
그냥 브라우저 주소창에 호출해도
json 형태던 쓰기 편한것을 정상적으로 브라우저에 출력하는 송수신용
jsp를 하나 만드시구요.
그리고 ajax는 그 후입니다.
주소창에
송수신.jsp?action=like&contentNo=1234
했을때 정상적으로
{ "result":"Ok" }
출력처리되는 jsp를 만드셨다면
ajax는 그냥 그걸 새로고침없이 자바스크립트에서 값을실어 호출하는 역활밖에
하지 않는겁니다. 별거 없어요.
결국 머리를 쓰면 아이프레임을 보이지않게 숨겨놓고 해당 아이프레임에 원하는 URL호춣하고..
페이지 로드되면 아이프레임 부모가 아이프레임에 뜬것을 파싱해서 콜백으로 쓰는것도
세로고침없이 좋아요 만들수 있습니다만..
기술은 최신이 좋으니까요. 아이프레임은 크로스도메인 제약도 있고 ㅎ
그리고 해당 좋아요 구현에
동기/비동기는 크게 필요없습니다.
무슨 다른거 같이처리하는데 싱크맞아야 하는것도 아니고
콜백이 가능함으로 통신 완료후 success 떨어져서 이후 처리하면 되는거니까요.
으어어.. 해..해보겠습니다 ;ㅅ;
저는 주력이 php라서 jsp는 가물가물하지만
결국 ajax가 호출하는건 똑같은데
아마 post던 get이던 호출하면
송수신.jsp에
<%
String action= request.getParameter("action");
String contentNo= request.getParameter("contentNo");
if(action=="like"){
doit!!!... with contentNo~~~
DB든 뭐든 SQL쿼리 실행!
처음엔 파라메터값이 잘 넘어갔나 보려고 그냥 파라메터값을 그대로 찍어보는거도 좋음
}

%>

하면됩니다. 그리고 마지막에... 제가 jsp출력이 기억이 안나지만
jsp에서 { "result":"Ok"} 든 대충 출력하면 되구요.
이왕이면 json이든 object든 중간 처리 진행값을 잘 알기쉽게
다루는 값이 있어서 최종적으로 그걸 출력하면 좋아요.
헤더에 콘텐츠타입을 json등으로 해놓으면
ajax에서 별도의 파싱없이 자연스레
sucsses(_callback){
if(_callback.result =="Ok"){
alert("좋아요성공");
/*
조아요에 성공했으니 해당 숫자값을 올림하던지
해당 리스트만 다시 뿌리는 ajax를 돌려서 jquery로 교체한다던지..
원하는데로 처리
*/
} else {
alert("실패처리");
}
}
하시면 되겠습니다.
하나의 .java 말씀하시는거 보니
아무래도 헛갈리시는건...
출력되는 프론트.jsp 와
송수신.jsp 별도로 두는게 좋습니다.
물론 하나의 URL에 ajax통신이 오면 별도로 동작하게 할수도 있지만..
만드는 사람이 복잡해져용.
스프링 MVC 패턴 위주로 진행하시는거 같으니 전 그냥 지금하시는거 처럼 jsp 스크립틀릿 식 보단 서블릿 자바코딩이 더 좋을거 같네요 ㅎ
으어엉..ㅠ
완성도 보단 제가 이해를 해야하는거라서 !!
아작스가 어떤건지만 말아도 다른 팀원들(빠요엔 3명ㅋ)이 아작스로 해둔게잇는데 그걸 읽을줄도 알아야하거든영 ㅠㅠ
암튼... 예제로 몇개 만들어보니 알거같기도 하고;;
한번 지금 프잭에 적용해보겠읍니다
어느세 답글 주르르 달렸네요 ㅋㅋ 케르발님 댓글에 이어 제가 단 댓글때문에 혼동방지 차원에서 조금만 덧붙이자면
ajax는 기본 비동기 방식이에요.

async : false or true 이렇게 잡아주면 됩니다. 디폴트로 true로 잡혀있어요. true==비동기

지금과정에서야 뭐 크게 신경쓸게 있겠냐마는.. 일단 달아둘게요
아앗 ㅠㅠ 고맙습니다..
js의 콜백 개념부터 익히셔야 할 것 같구요.
에이잭스를 제대로 이해하시려면 xhr부터 아셔야 합니다
jQeury.ajax도 xhr을 jQuery의 체이닝 문법으로 정리한 것 뿐입니다.
친구글 비밀글 댓글 쓰기

user error : Error. B.