JavaScript&JQuery (31) 썸네일형 리스트형 위치정보 활용하기 & 공공데이터 활용 - 지도활용 Part3 지난번 포스팅에서는 공공데이터의 xml 방식의 데이터를 파싱하는 방법을 작업했었다.하지만 내가 사용하려는 API가 json 형태를 제공해서 파싱필요없이 ajax로 바로 지도로 뿌려보겠다.* 한국관광공사 오픈 apihttps://www.data.go.kr/data/15101971/openapi.do#/ 지도영역 지난번 포스팅에서는 centerMark 표시까지 마쳤었는데, centerMark 바로 아래에 ajax 통신을 작성하였다.주의해야할점은 공공데이터 서비스키는 적용방식에따라 인코딩/디코딩 버전을 적용해서 사용해야한다.ajax로 통신하고 있는경우 디코딩용 키를 사용했다. 나는 아이콘이 따로 없기때문에 중심좌표를 다른아이콘으로 설정하지는 않았다.아이콘 변경이나 추가 레이어팝업창 기능을 넣으면 좋을것 같다.. 위치 정보 가져오기 (위도,경도) & 카카오 지도 API - 지도활용 Part1 Geolocation APIGeolocation API는 사용자의 위치정보에 액세스할 수 있는 권한을 요청한다.브라우저에서 기본적으로 제공되는 기능이라 사용이 용이하다. (지원하지 않는 브라우저도 있다.) if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const latitude = position.coords.latitude; const longitude = position.coords.longitude; console.log('위도:::'+latitude); console.log('경도:::'+.. 자주쓰는 jquery 함수 모음 ▣ 체크박스 전체선택 스크립트 전체 선택 항목 1 항목 2 항목 3 ▣ 공백입력 막기 스크립트 ▣ 핸드폰번호 포맷 설정 ▣ 조사 구분 스크립트 Ajax 회원가입 유효성 검사 Ajax 회원가입 유효성 검사 ▶ 실습3 회원가입 유효성 검사. 성명, 아이디, 비밀번호, 비밀번호 확인, 이메일, 성별 에 대해 유효성 검사를 하는 코드를 ajax를 활용하여 코드를 작성하고, 아이디는 중복 확인도 하자. 아이디 : 아이디 중복 확인 비밀번호 : 비밀번호 확인 : 이름 : 이메일 : 성별 : 남 여 회원가입 Checkbox 1. checkbox 체크한 값 확인 $('[name]:checked').val() //체크된 갯수 $('[name]:checked').length 2. checkbox 체크 여부 확인 $('[name]').is(':checked'); $("input:checkbox[name='NAME']").is(":checked"); 3. checkbox 체크 처리 $('[name]').prop("checked", true); $('[name]').prop("checked", false); Ajax - json Ajax - json data type이 json인 파일과 통신하여 화면에 호출해보자.. 먼저, contentType을 변경해줘야 한다. ▶ gson 외부 라이브러리 사용하는것도 좋은 방법이다. json구조를 띄는 직렬화된 데이터를 JAVA의 객체로 역직렬화, 직렬화 해주는 자바 라이브러리 입니다. ▶ gson 다운로드 gson 사용하기 ▶ gson 사용 방법 - ajax 코드 부분 호출 호출 버튼을 눌렀을 때, 통신하고자 하는 url ajaxjsonCall.jsp파일과 연결되며, 전송할 데이터는 없지만 아래의 gson과 연동된 곳에서 데이터를 받아온다. 그 후 input박스의 value값으로 받아온 데이터를 넣어주기로 하였다. - 호출하고 싶은 파일(gson과 연동) map이라는 객체에 put메서드를 .. Ajax - HTML Ajax - HTML data Type이 Html인 파일과 통신하여 Ajax로 html파을일 불러와서 화면에 로드해보자. var request = $.ajax({ url: "script.php", // 통신할url method: "POST",// 통신할 메서드 타입 data: { id : '' },//전송할 데이터 dataType: "html"//전송받은 데이터를 변환시킬 컨텐츠 타입 //DATA TYPE //html(text/html), json(application/json), xml(text/xml), text(text/plain) }); //정상적으로 통신이 완료되었을 때 실행되는 메소드. 인수값인 함수를 실행시킴(콜백함수) request.done(function( data ) { console... Ajax Ajax 란? 한 화면에 모든 데이터를 다 저장하지 않는다. 한 화면이 로드되려면 시간이 걸리기도 하지만 비효율 적일 것이다. Ajax를 이용하는 이유는 화면 전환 없이 클라이언트와 서버간에 정보 교환을 하기 위해서이다. Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다. 그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다. ▶ 데이터 전송방식 $.ajax() - 비동기식 Ajax를 이용하여 HTTP 요청을 전송한다. $.ajax(URL주소[,옵션]); $.get() - 전달받은 주소로 GET 방식의 HTTP 요청을 전송한다.(주소에 데이터를 추가하여 전달하는 방식) $.get(URL.. 이전 1 2 3 4 다음 목록 더보기
