- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
JQuery [jQuery] Ajax 방법
2018.08.03 15:22
[jQuery] Ajax 방법
- 각 Ajax 방식을 호출하는 방법
- $("#btnOK").click(function(){
- var url="test.aspx";
- var params="param1="+param1+"¶m2="+param1;
- $.ajax({
- type:"POST",
- url:url,
- data:params,
- success:function(args){
- $("#result").html(args);
- },
- beforeSend:showRequest,
- error:function(e){
- alert(e.responseText);
- }
- });
- });
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 로 표현]
- $.ajax({
- type: 'POST',
- url: url,
- data: data,
- success: success,
- dataType: dataType
- });
[사용예]
- $.post("http://web/test/");
- $.post("http://web/test/", { name: "John", time: "2pm" } );
- $.post("http://web/test/", { 'choices[]': ["Jon", "Susan"] });
- $.post("http://web/test/", $("#testform").serialize());
- $.post("http://web/test/",
- function(data) { alert("Data Loaded: " + data); });
- $.post("http://web/test/", { name: "John", time: "2pm" },
- function(data) { process(data); }, "xml" );
- $.post("http://web/test/", { "func": "getNameAndTime" },
- function(data){
- console.log(data.name);
- console.log(data.time);
- }, "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 로 표현]
- $.ajax({
- url: url,
- data: data,
- success: success,
- dataType: dataType
- });
[사용예]
- $.get("http://web/test/");
- $.get("http://web/test/", { name: "John", time: "2pm" } );
- $.get("http://web/test/", { 'choices[]': ["Jon", "Susan"] });
- $.get("http://web/test/", function(data) { alert("Data Loaded: " + data); });
- $.get("http://web/test/", { name: "John", time: "2pm" }, function(data) { process(data); }, "xml" );
- $.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 함수
[$.ajax 로 표현]
- $.ajax({
- url: url,
- dataType: 'json',
- data: data,
- success: callback
- });
[사용예]
- <script>
- $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
- {
- tags: "mount rainier",
- tagmode: "any",
- format: "json"
- },
- function(data) {
- $.each(data.items, function(i,item){
- $("<img/>").attr("src", item.media.m).appendTo("#images");
- if ( i == 3 ) return false;
- });
- });
- </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 )
[사용예]
- $.ajax({
- type: "POST",
- url: "http://web/test/",
- data: { name: "John", location: "Boston" }
- }).done(function( msg ) {
- alert( "Data Saved: " + msg );
- });
- $.ajax({
- url: "http://web/test/",
- cache: false
- }).done(function( html ) {
- $("#results").append(html);
- });
- var menuId = $("ul.nav").first().attr("id");
- var request = $.ajax({
- url: "http://web/test/",
- type: "POST",
- data: {id : menuId},
- dataType: "html"
- });
- request.done(function(msg) {
- $("#log").html( msg );
- });
- request.fail(function(jqXHR, textStatus) {
- alert( "Request failed: " + textStatus );
- });
- $.ajax({
- type: "GET",
- url: "test.js",
- dataType: "script"
- });
4.1 $.ajaxSetup()
- 공통적인 기본 ajax 요청을 미리 설정함
[형식]
jQuery.ajaxSetup( options )
- optional : default Ajax 요청의 설정값 ( key/value )
[사용예]
- $.ajaxSetup({
- url: 'http://web/test/',
- global: false,
- type: "POST"
- });
- $.ajax({
- data: {'name': 'Dan'}
- });
- $.ajax({
- data: {'name': 'John'}
- });
5. $.load() 방식
- 외부 컨텐츠 가져올때 사용
[형식]
.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )
- url : 요청 Url
- data : 요청과 함께 서버에 보내는 string 또는 map
- complete(responseText, textStatus, XMLHttpRequest) : 요청이 완료될때 실행되는 callback 함수
[사용예]
- $('#result').load('ajax/test.html');
- $('#result').load('ajax/test.html', function() {
- alert('Load was performed.');
- });
- $('#result').load('ajax/test.html #container');
- $("#objectID").load("test.asp", { 'choices[]': ["Jon", "Susan"] } );
출처: http://rocabilly.tistory.com/27 [프로그램이 좋다]
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
