본문 바로가기

AJAX6

7월 4일 project - AJAX 지역 셀렉스 박스에서 AJAX 사용하기 전체 서울특별시 부산광역시 대구광역시 인천광역시 광주광역시 대전광역시 울산광역시 경기도 강원도 충청북도 충청남도 전라북도 전라남도 경상북도 경상남도 제주도 $("#city").on("change", function (){ let city = $("#city").val(); // select 값 가져오기 console.log(city); cobj = {"glocation":city}; // DB연동 list로 받기 console.log(cobj); $.ajax({ url:"gymList", type:"post", data: cobj, success:function(data){ console.log(data); if(data != null && data != ""){ .. 2023. 7. 5.
5. 인터페이스 기능 구현 인터페이스 기능 구현 기술 JSON(Javascript Object Notation) 개념 : 속성-값, 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준포맷 특징 : AJAX에서 많이 사용, XML을 대체하는 주요 데이터 포맷, 언어 독립형 데이터 포맷, 다양한 데이터 프로그래밍 언어에서 사용, 사람이 읽고 쓰기 용이, 기계가 분석하고 생성하는데 용이 표현자료형 : 숫자, 문자열, 배열, 객체 장점 : XML보다 가볍고 빠름, 자료 종류에 큰 제한이 없음, Javascript에서 접근이 쉬움 단점 : 태그가 없어서 가독성이 떨어짐, DTD(문서정의형식)가 없어 데이터 형식 오류시 알기 어려움 XML(eXtensible Markup Language.. 2023. 6. 30.
5월 16일 (2) Spring - AJAX DB 연동 REST(REpresentational State Transfer) 방식 = 비동기 전송 방식(지금 하고 있는 ajax방식의 다른 이름) uri(url)를 통해 자원(데이터)을 명시하고, method(get/post)를 사용하여 해당 자원의 CRUD를 적용하는 방식. REST 전송을 위해 jQuery 에서 구현한 것이 AJAX Spring Framework에서는 REST 방식을 처리하는 Controller를 제공 -> RestController 1) 일반 Controller 사용 시 메소드에 @ResponseBody 어노테이션 사용 @GetMapping("idcheck") @ResponseBody //let sendObj = {"uid":inputId}; public String idcheck(Strin.. 2023. 5. 17.
5월 15일 (2) Spring - AJAX AJAX(비동기전송) 프론트엔드(html, jsp, thymeleaf, js 등)와 백엔드(Spring Framework) 간 통신 1. 동기(Synchronous) 통신 페이지가 변경되는 전송 방식(새로고침 포함) , , location.href="/..." 2. 비동기(Asynchronous) 통신 js에서만 처리. 페이지는 변경되지 않고, 같은 페이지의 특정 부분을 변경. aja(jQuery). 이 방식을 RESTful방식이라고 함. 참고> SPA(Single Page Application) 하나의 페이지 템플릿만을 사용하여 전체 사이트를 구축하는 방식. AJAX(Asynchrounous Javascript And Xml) 자바스크립트에서 제공하는 비동기 통신용 객체인 XMLHttpRequest를 .. 2023. 5. 15.
3월 23일 (2) AJAX 정보 받아서 표로 만들기 userId id title 2023. 3. 23.
3월 22일 JavaScript - jQuery 요소삭제, AJAX 제이쿼리 연습방법 - 자바스크립트로 짜인 코드를 제이쿼리 방식으로 변경해 보기 어제 이어서 요소의 삭제 1. $("선택자").remove(); 선택한 요소와 그 하위 요소 모두 삭제 2. $("선택자").empty(); 선택한 요소의 하위 요소만 삭제(비운다.) Parent Element Child Element 1 Child Element 2 add remove empty 서버와 클라이언트 통신 방식 1. 동기 통신(Synchronus) 데이터의 시작, 종료 응답을 해줌, 데이터를 못 받은 부분에도 응답을 해주어서 데이터를 완성 시킴, 서로 싱크를 맞춤 a태그, form 태그의 페이지가 완전히 다른 html 화면으로 바뀌는 것을 동기통신이라고 한다. 데이터를 주고받을 때 시작과 종료를 정하고 양 쪽이 .. 2023. 3. 22.

티스토리툴바