I T H

화면마다 공통으로 사용할 스크립트 파일을 정리하기 위해 공통사용 스크립트 파일을 따로 만들기로 함. [ util.js ] ajax 호출을 함수화 시켜 호출하여 사용할 수 있도록 함. /****************************************************************************** * * cfFind * ajax call 를 통한 데이터 조회 시 사용 * ******************************************************************************/ function cfFind(url, obj, fnSuccess, isSync, type) { $.ajax({ beforeSend: function(xhr) { xhr...

해당 프로젝트 jsp 파일 내에 javascript 코드가 있어서 복잡해보인다. 따로 분리 시켜서 코드가독성을 증가하려고 함. 중복된 코드는 하나의 공통메서드로 관리하려고 함. ㄱ. .js 파일들 jsp에서 분리 - 먼저 resources 파일 아래 ajax 공통메서드들만 모아놓을 ajax.js 파일과 crud.js 파일을 만든다. - home.jsp의 ㄴ. ajax.js 파일에 ajax 공통메서드 생성 - ajax 데이터 저장용 메서드(insert, update, delete) 와, 데이터 조회용 메서드를 작성한다. //2023. 6. 28 // CRUD ajax 공통 메서드 //데이터 입력용 메서드(insert, update, delete) function dataSaveAjax(url, obj, t..

이어서 CRUD 중 D(delete)에 해당하는 DELETE 관련 내용을 설명한다. 테스트 단계이므로 그리드 등의 API는 사용하지 않고 일반 테이블로 작성한다. 4. DELETE ㄱ. 화면 뷰 수정 (JSP) - 앞서 업데이트 폼 아래의 업데이트 버튼과 함께 삭제 버튼을 1개 추가하여 준다. 3. DATA UPDATE/ 4. DATA DELETE ID Password Name Tel Email Update Delete ㄴ. 삭제 버튼 클릭 이벤트 처리 (Javascript / JQuery / Ajax) - 삭제 버튼에 대한 이벤트를 추가로 스크립트 작성을 해준다. - 사용자 아이디를 키로 하기 때문에 파라미터에는 사용자 아이디만 담아주어도 된다. // 4. DATA DELETE $("#btnDelete..

이어서 CRUD 중 U(update)에 해당하는 UPDATE 관련 내용을 설명한다. 테스트 단계이므로 그리드 등의 API는 사용하지 않고 일반 테이블로 작성한다. 3. UPDATE ㄱ. 화면 뷰 수정 (JSP) - 앞서 조회된 리스트 중 1개의 행을 클릭한 경우 UPDATE 폼에 출력하고 출력된 정보를 수정한 후 수정 버튼을 클릭하면 실제 데이터가 업데이트 되도록 처리한다. - 먼저 업데이트 관련 화면 폼을 작성한다. 3. DATA UPDATE ID Password Name Tel Email Update - 사용자 아이디 (txtModifyUserId) 의 경우에는 수정이 불가하도록 readonly 옵션을 주어 처리한다. ㄴ. 조회된 리스트 중 행 클릭 이벤트 처리 / 업데이트 처리 (Javascript..

1. Asynchronous javascript And Xml(비동기식 자바 스크립트와 xml)의 약자 2. 자바 스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 3. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 - 해당 문서에서는 ajax를 활용한 컨트롤러 호출 및 데이터를 화면에 출력하는 것으로 사용 방법에 대해 설명한다. [동기 방식 VS 비동기 방식] - 동기 방식 : 특정 일 처리를 시작과 끝을 모두 확인하고 다음 순서의 일 처리로 넘어가는 방식 - 비동기 방식 : 특정 일 처리를 병행하여 처리하는 방식 [ AJAX 를 활용한 GET 방식 컨트롤러 호출 ]..