홈페이지 소스 전체소스CSSHTMLSCRIPTAJAXJQUERYAPIASMOBILESERVER기타 게시물 정렬 전체소스CSSHTMLSCRIPTAJAXJQUERYAPIASMOBILESERVER기타
[AJAX] jquery ajax(), jquery load() 호출, 파일전송, 로딩 2018.02.02 북마크 [출처 이동] 작성자 정보 작성자 꿘쓰 작성일/수정일 2013-09-12 11:41:20 / 2018-02-02 11:41:20 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 }); 이 포스트 공유하기 글수정 글삭제전체목록
