티스토리 뷰

WEB 웹/ajax

ajax는 비동기식

KIMSG 2017. 7. 20. 15:22

처음 프로그래밍을 입문할 때는 그다지 필요하다고 생각하지 않았는데....


실제로 코딩을 하면 할 수록... ajax를 참 많이 쓰는것 같다.



**ajax는 비동기식이라서 많은 상황을 고려해줘야 한다.**



어제 동아리 관리를 만들었는데.... ajax를 사용했다.


조건...

1. 동아리를 등록한 후 생성된 고유 번호를 가져올 것

2. 가져온 번호로 동아리 회장의 값에 넣어줄 것

3. 동아리 번호로 동아리 회원들의 값에 넣어줄 것



조건1번 때문에 동아리 입력을 ajax로 보내야겠다는 결론이 나왔다.



Ajax를 사용하면 화면이 리로딩되거나 하진 않지만 데이터만 받아 올 수 있다.


데이터를 받아오고 나면 dom에 ~~것을 뿌려줘라 등의 jQeury로 응용할 수 있다.



$.ajax({

                url : "/ajax/Insert.do", 

       contentType: false,

       dataType : "json",

       type: 'POST',

       processData: false,

       data: formData,

       error: function(xhr, status, error){

           alert(error);

       },

       success : function(res){

        addMaster(res.club_idx);

                        console.log(res.club_idx);

       }

});



나는 java에서 값을 보내줘서 jsp로 받았지만 사용하는 환경에 따라서 조금씩 다를 수는 있다.


위 코드에서 form의 데이터들을 insert로 java로 보내고 다시 java에서 나온 결과값을


res에서 받아서 뽑아 오는 것이다. 



이런식으로 계속 데이터 통신을 하면 되지만.....ㅇ


페이지에 내가 썻던 흔적들은 계속 남아있게 되어서 사용자가


입력을 한게 맞는지 확인 하기 어렵다.


**마지막에  reload해주면 된다.**


`location.reload(true); `  



'WEB 웹 > ajax' 카테고리의 다른 글

id 중복체크 후 재 입력 방지  (0) 2017.07.24
AJAX 동기식으로 처리하기  (0) 2017.07.23
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함