ajax9

• [axios] axios 비동기 통신 목차샘플 코드function callAPI(e) { e.preventDefault(); const url = 'api.test.com'; axios.post(url, { param: //데이터 있으면.. 넣기 }) // 정상인 경우 .then((response) => { if (response.data.success) { location.href = "/"; } }) // 예외 발생 .catch((error) => { console.error('데이터 처리 .. IT/development 2025. 1. 19.

• [jQuery] 공통으로 선택자 처리 목차 거창할 건 없고 매개변수로 넘긴 문자열 앞에 "#"를 붙여서 아이디 선택자로 만들어서 처리한다. 소스를 보면 바로 이해가 된다. html 상단 탭에 클릭 이벤트를 줬고 2개의 매개변수를 넘긴다. 전체메뉴 인기메뉴 특별메뉴 script 구분자를 받아서 서버로 넘겨서 구분자에 해당되는 데이터를 조회, tartget id명을 받아서 "#"를 붙여 선택자로 처리, 이러면 function 여러개 만들 필요 없이 저 function 하나로 처리가 가능하다.(화면에서 하나의 테이블만 바라보고 테이블에 구분자 컬럼이 있음) 누구나 알고 있을 수 있지만 그래도 메모한다. function getMenuList(gubun, target) { $.ajax({ url: '/info/selectMenuList.do', ty.. IT/development 2024. 1. 21.

• 

  [JavaScript] selectbox 동적 표시 상위 선택값에 따라 하위 선택값이 다르게 표시되어야 되는 경우가 있다. 예를 들면 아래와 같은 상황이다. 광역지자체에 따라 그 하위 지자체 목록이 표시 1번 selectbox 선택 데이터를 조건으로 서버에서 데이터를 조회 후 2번 selectbox를 동적으로 그려야 한다. 상위 selectbox에 onchagne() 이벤트를 걸어서 데이터 변경이 감지될 때마다 서버에서 데이터를 가져와서 하위 selectbox의 option값을 그린다. 관리 광역지자체 관리 기초지자체 전체 function fn_get_LocalGovInstCode(){ //광역지자체코드 var selectedValue = $("#mngWideAreaLocgovCd").val(); $.ajax({ url: '/locgov/selectLoc.. IT/development 2024. 1. 21.

• 

  [Vue.js] 싱글 파일 컴포넌트에서 axios 통신 post 방식으로 데이터 전송 #ajax 통신 위한 lib 설치 npm i axios App.vue id: password: login get방식으로 데이터 조회 조회 queryString(?empId=dev&empNm=로다주&empEmail=dev@naver.com) 추가 시 아래처럼 사용 const data = { empId: this.empId, empNm: this.empNm, empEmail: this.empEmail } //2번 째 인자값에 위에서 만든 object 추가 axios.get(url, { data }) reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21471&tab=curriculu.. IT/development 2023. 7. 29.

• 

  [Vue.js] ajax로 데이터 조회 예제(feat. axios) Vue.js에서 ajax로 서버에서 데이터 받아와서 테이블에 뿌리는 간단한 예제 cli 환경 기반이라 npm install로 vue.js cli를 설치해야 함(미리 설치한 상태라 동영상에는 설치과정 누락됨) npm install -g @vue/cli cli 설치 후 vue create 프로젝트명으로 cli 기반 vue 프로젝트 생성 vue create vue-test1(생성할 프로젝트명) 아래 명령어로 node.js 런타임을 실행해서 페이지를 띄움 npm run serve 페이지를 띄운 순간부터 vue.js는 데이터가 변경되는 순간 실시간으로 반영한다. mounted(DOM 그린 다음 실행되는 함수) 부분에 console.log() 찍어보면 렌더링을 다시 하는게 보인다. (이놈도 React처럼 가상 DO.. IT/development 2023. 7. 23.

• [html] button에 type을 명시하자(feat. default submit) 목차 ajax로 페이징을 구현 했는데 페이지 이동이 되었다가 다시 같은 페이지가 호출이 되었다. 콘솔 보면 2페이지 데이터를 정상적으로 가져왔다가 다시 1페이지가 호출이 되고 있다. 간단한 원인 이었는데 꽤 많은 시간 삽질 끝에 나중에 다시 봐야지 하고 넘어 갔었다가 다시 봐서 해결 했다. before source 🙂 /** * 페이지네이션을 그린다. * @param paging */ function drawPagination(paging) { let pageHtml = ""; pageHtml += ""; //first const first = parseInt(paging.firstPage); pageHtml += ""; if (paging.currentPage === paging.firstPage) {.. IT/development 2023. 7. 9.

• 

  [springBoot/thymeleaf] ajax 페이지네이션 sample(feat. study용) 목차 ddl(Oracle) /* 게시판 */ CREATE TABLE "BOARD_INFO" ("BOARD_NO" NUMBER NOT NULL ENABLE, "TITLE" VARCHAR2(50) NOT NULL ENABLE, "CONTENT" VARCHAR2(4000) NOT NULL ENABLE, "USER_ID" VARCHAR2(20) NOT NULL ENABLE, "USE_YN" CHAR(1) DEFAULT 'Y' NOT NULL ENABLE, "REG_DATE" DATE DEFAULT SYSDATE NOT NULL ENABLE, "MOD_DATE" DATE, CONSTRAINT "BOARD_INFO_PK" PRIMARY KEY ("BOARD_NO") ); COMMENT ON COLUMN BOARD_.. IT/development 2023. 6. 4.

• 

  [JavaScript] Ajax 결과값 변수 저장 목차 미래의 나를 위해 기록을 남김 😄 ajax를 통해 얻어온 결과를 저장하려면 ajax시 옵션에 async: false를 줘서 동기식으로 처리하도록 변경해야 한다. 기본값은 true 아니면 undefined로 return 된다. function duplicateCheck(menuCode) { let duplicate_result; $.ajax({ url : '/admin/menu/duplicateCheck', async: false, type : 'post', data : {'menuCode': menuCode}, success: function (data) { // alert("data : " + data); duplicate_result = data; } }); return duplicate_res.. IT/development 2022. 11. 22.

• 

  [jQuery] jQuery.ajax() 사용법 예시(feat. 댓글 페이지네이션) 목차 jQuery .ajax() 😄 미래의 내가 보기 위해 남겨둠 jQuery의 ajax 사용법만 간단히 남기려고 했으나 예시 코드에 있는 코드들도 같이 적는게 좋을 듯 싶어서 같이 남김 // 예시 $.ajax({ // 호출 url url: '/reply/insert', // 전달방식 type: 'post', // dataType: "json"// 데이터타입 json으로 할 경우 // 전달할 데이터 data: {'boardId': boardId, 'replyContent': replyContent, 'replyWriter': replyWriter}, // 성공 시 콜백 함수, 밑에 실패 시 콜백도 만들어도 좋다. success: function (data) { getRelyList(); } // 댓글 조.. IT/development 2022. 11. 21.