프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[AJAX] jquery ajax(), jquery load() 호출, 파일전송, 로딩

2018.02.02
ajax는 html의 리로딩 없이 서버와 비동기식으로 통신하는 방법이다. ** 비동기 통신 방식 : 영문자를 나타내는 코드 요소의 각 그룹 전후에 각각 시작 신호, 정지 신호를 걸어서 데이터 전송을 수행하는 것. 비동기 통신 방식의 하나. ** jquery ajax load() ** * $(selector).load("URL",data,callback); // 기본 문법 - URL 은 불러들일 페이지의 주소값입니다. - data 는 쿼리스트링 매개변수값 입니다. - callback 은 load 함수가 완료된 후 실행되는 함수 입니다. ** jquery ajax ** $.ajax({ type: "POST", //GET, POST타입 url: "target url", dataType: "html", //html, script, text data : "parameter1="+parameter1+"¶meter2="+parameter2, //&뒤로 더 추가하면 된다. success: Proc //callback 함수 }); 콜백함수 //response로 받은 데이터 처리 function Proc(response) { var result = eval('(' + response + ')'); var totalCnt = result.totalCnt; $('#totalCnt').text(totalCnt); } 파일전송 $.ajax({ type: 'POST', url: 'php/upload.php', data: $('#file').attr('files'), cache: false, contentType: 'multipart/form-data', processData: false, }); ** jquery ajax loading** 플러인을 이용하여 로딩바 구현 - <script type="text/javascript" src="jquery.blockUI.js"></script> ajax 상단 스크립트 삽입 - $.ajax({ type : "post", url : "target url", dataType: "html", data : "parameter1="+parameter1+"¶meter2="+parameter2, //&뒤로 더 추가하면 된다. cache: false, success: function(html) { document.getElementById("DIV 아이디").innerHTML = html; }, error : function(request,status) { log("AjaxServerSide Error 관리자에게 문의하세요 "); window.alert("AjaxServerError : " + status); }, complete : function(xhr,status) { $.unblockUI({fadeOut:200});//로딩창을 닫는다 }, beforeSend : function(xhr) { $.blockUI({//로딩창 message : "<img src='../images/loading7.gif' width='100' height='100' />Loding.." , backgroundColor: '#000', css:{border : '2px solid #a00'}, cursor:"wait", fadeIn: 200, overlayCSS: { backgroundColor: '#000', opacity: 0.8 }, growlCSS:{ backgroundColor: '#FFFFFF' } })//End Of blockUI }//End Of BeforeSend });

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 2212
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 1283
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 910
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 17433
218 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 20
217 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 61
216 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 196
215 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 261
214 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 204
213 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 209
212 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
211 [소스] 별점주기 꿘쓰 2019.02.21 238
210 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 234
209 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 334
208 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 257
207 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 286
206 [소스] 반응형 상단메뉴바 소스  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.12.20 839
205 [JQUERY] jquery animation() 제이쿼리 에니메이션 꿘쓰 2018.12.20 297
204 [소스] javascript 에서 간단한 form 만들기 꿘쓰 2018.12.03 365
203 [SCRIPT] isNaN 함수 꿘쓰 2018.11.28 330
202 [기타] 프로그램 소스 링크 꿘쓰 2018.10.30 382
201 [JQUERY] jquery radio check 초기화, 값설정, 로직정리 꿘쓰 2018.10.22 479
200 [SCRIPT] 스크롤 안 움직이게 막기, 스크롤 고정 꿘쓰 2018.08.17 1235
199 [기타] 웹 소스코드 정렬해주는 사이트 꿘쓰 2018.08.16 781