JQuery [jQuery] Ajax 방법

2018.08.03 15:22

졸리운_곰 조회 수:655

 

[jQuery] Ajax 방법

 

- 각 Ajax 방식을 호출하는 방법

view plaincopy to clipboardprint?
  1. // 버튼 클릭시 ajax 실행  
  2. $("#btnOK").click(function(){  
  3.       
  4.     var url="test.aspx";  
  5.     var params="param1="+param1+"¶m2="+param1;  
  6.   
  7.     $.ajax({      
  8.         type:"POST",  
  9.         url:url,      
  10.         data:params,      
  11.         success:function(args){   
  12.             $("#result").html(args);      
  13.         },   
  14.         beforeSend:showRequest,  
  15.         error:function(e){  
  16.             alert(e.responseText);  
  17.         }  
  18.     });  
  19.       
  20. });  

 

 

1. $.post() 방식

 

- 서버에 데이터를 HTTP POST 방식으로 전송한 후 서버측 응답 받을 때 사용

 

[형식]

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

 

 

[$.ajax 로 표현]

 

view plaincopy to clipboardprint?
  1. $.ajax({  
  2.   type: 'POST',  
  3.   url: url,  
  4.   data: data,  
  5.   success: success,  
  6.   dataType: dataType  
  7. });  

 

 

 

[사용예]

 

view plaincopy to clipboardprint?
  1. // 요청 Url 만 , 리턴 결과값 무시  
  2. $.post("http://web/test/");  
  3.   
  4. // 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시  
  5. $.post("http://web/test/", { name: "John", time: "2pm" } );  
  6.   
  7. // 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시  
  8. $.post("http://web/test/", { 'choices[]': ["Jon", "Susan"] });  
  9.   
  10. // 요청 Url + 폼데이터, 리턴 결과값 무시  
  11. $.post("http://web/test/", $("#testform").serialize());  
  12.   
  13. // 요청 Url, xml(또는 html)리턴 결과값  
  14. $.post("http://web/test/",   
  15.       function(data) {    alert("Data Loaded: " + data);  });  
  16.   
  17. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식  
  18. $.post("http://web/test/", { name: "John", time: "2pm" },    
  19.       function(data) {    process(data);  },   "xml" );  
  20.   
  21. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식  
  22. $.post("http://web/test/", { "func": "getNameAndTime" },    
  23.       function(data){      
  24.                      console.log(data.name); // John      
  25.                      console.log(data.time); //  2pm    
  26.       }, "json");  

 

 

 

 

 

2. $.get() 방식

 

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답 받을 때 사용

 

[형식]

jQuery.get(  url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

 

 

[$.ajax 로 표현]

view plaincopy to clipboardprint?
  1. $.ajax({  
  2.   url: url,  
  3.   data: data,  
  4.   success: success,  
  5.   dataType: dataType  
  6. });  

 

 

[사용예]

view plaincopy to clipboardprint?
  1. // 요청 Url 만 , 리턴 결과값 무시  
  2. $.get("http://web/test/");  
  3.   
  4. // 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시  
  5. $.get("http://web/test/", { name: "John", time: "2pm" } );  
  6.   
  7. // 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시  
  8. $.get("http://web/test/", { 'choices[]': ["Jon", "Susan"] });  
  9.   
  10. // 요청 Url, xml(또는 html)리턴 결과값  
  11. $.get("http://web/test/", function(data) {    alert("Data Loaded: " + data);  });  
  12.   
  13. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식  
  14. $.get("http://web/test/", { name: "John", time: "2pm" },  function(data) {    process(data);  },   "xml" );  
  15.   
  16. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식  
  17. $.get("http://web/test/", { "func": "getNameAndTime" },  function(data){    console.log(data.name); // John    console.log(data.time); //  2pm  }, "json");  

 

 

 

 

3. $.getJSON() 방식

 

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답을 JSON 형식으로 받을때 사용 

 

[형식]

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

 

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

[$.ajax 로 표현]

view plaincopy to clipboardprint?
  1. $.ajax({  
  2.   url: url,  
  3.   dataType: 'json',  
  4.   data: data,  
  5.   success: callback  
  6. });  

 

 

[사용예]

view plaincopy to clipboardprint?
  1. <script>   
  2.     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",   
  3.     {   
  4.         tags: "mount rainier",   
  5.         tagmode: "any",   
  6.         format: "json"   
  7.       },   
  8.       function(data) {   
  9.         $.each(data.items, function(i,item){   
  10.           $("<img/>").attr("src", item.media.m).appendTo("#images");   
  11.           if ( i == 3 ) return false;   
  12.         });   
  13.     });  
  14.   </script>  

 

 

 

 

4. $.ajax() 방식

 

- 서버에 데이터를 HTTP POST,GET,JSON 모든 방식 전송 가능한 통합적인 함수

- 다양한 Parameter 존재

 

[형식]

jQuery.ajax( url [, settings] ) [ 1.5 이상버젼 ] ,jQuery.ajax( settings ) [ 1.0 이상버젼 ]

 

- url : 요청 Url

- settings : key/value 쌍으로 된 Ajax 요청 Set ( optional )

 

 

[사용예]

 

view plaincopy to clipboardprint?
  1. // 요청 Url + 추가적 데이터, 완료된 후 리턴 메시지를 받음  
  2. $.ajax({   
  3.       type: "POST",   
  4.       url: "http://web/test/",   
  5.       data: { name: "John", location: "Boston" }   
  6. }).done(function( msg ) {   
  7.       alert( "Data Saved: " + msg );   
  8. });  
  9.   
  10. // 최종 버전 리턴 Html 가져오기  
  11. $.ajax({   
  12.       url: "http://web/test/",   
  13.       cache: false   
  14. }).done(function( html ) {   
  15.       $("#results").append(html);   
  16. });  
  17.   
  18. // 서버에 데이터를 보낸 후 저장처리, 그리고 사용자에게 리턴 완료 메시지 반환  
  19. var menuId = $("ul.nav").first().attr("id");   
  20. var request = $.ajax({   
  21.     url: "http://web/test/",   
  22.     type: "POST",   
  23.     data: {id : menuId},   
  24.     dataType: "html"   
  25. });   
  26.    
  27. request.done(function(msg) {   
  28.     $("#log").html( msg );   
  29. });   
  30.    
  31. request.fail(function(jqXHR, textStatus) {   
  32.     alert( "Request failed: " + textStatus );   
  33. });  
  34.   
  35.   
  36. // 자바 스크립트 로딩 및 실  
  37. $.ajax({   
  38.     type: "GET",   
  39.     url: "test.js",   
  40.     dataType: "script"   
  41. });  

 

 

 

 

4.1 $.ajaxSetup()

 

- 공통적인 기본 ajax 요청을 미리 설정함

 

[형식]

jQuery.ajaxSetup( options )

 

- optional : default Ajax 요청의 설정값 ( key/value )

 

 

[사용예]

 

view plaincopy to clipboardprint?
  1. // 미리 ajaxSetup에 기본사항들을 설정한 후 ajax 로 각각 호출  
  2. $.ajaxSetup({  
  3.     url: 'http://web/test/',  
  4.     global: false,   
  5.     type: "POST"   
  6.   
  7. });  
  8. $.ajax({  
  9.       // url not set here; uses 'http://web/test/'  
  10.       data: {'name': 'Dan'}  
  11. });  
  12. $.ajax({  
  13.       // url not set here; uses 'http://web/test/'  
  14.       data: {'name': 'John'}  
  15. });  

 

 

 

 

 

5. $.load() 방식

 

- 외부 컨텐츠 가져올때 사용

 

[형식]

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

 

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

 

- complete(responseText, textStatus, XMLHttpRequest) : 요청이 완료될때 실행되는 callback 함수

 

 

 

 

[사용예]

view plaincopy to clipboardprint?
  1. //  Html Content 로딩  
  2. $('#result').load('ajax/test.html');  
  3.   
  4. //  Html Content 로딩 후 메시지  
  5. $('#result').load('ajax/test.html', function() {  
  6.   alert('Load was performed.');  
  7. });  
  8.   
  9. //  Html Content #container Target 로딩  
  10. $('#result').load('ajax/test.html #container');  
  11.   
  12. //  array parameter 전달 후 Html Content 로딩  
  13. $("#objectID").load("test.asp", { 'choices[]': ["Jon", "Susan"] } );  



출처: http://rocabilly.tistory.com/27 [프로그램이 좋다]

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED