jQuery Ajax

  1. $.ajax(options);
  2. $.ajax(url, options);
							$(document).ready(function () {
								$.ajax('/Home/MyFirstStringAction',{
									success: function(data) {
										$('body').append(data);
									}
								});
							});							
						
							$(document).ready(function () {
								$.ajax({
									url: '/Home/MyFirstStringAction',
									success: function(data) {
										$('body').append(data);
									}
								});
							});					
						
							$(document).ready(function () {
								$.ajax({
									url: '/Home/ActionWithData',
									data:{name:'rintiantta', age:21},
									success: function(data) {
										$('body').append(data);
									}
								});
							});				
						
jQuery Ajax() 메서드의 옵션
옵션 속성 이름 설명 자료형
async 동기, 비동기를 지정합니다. Boolean
complete(jqXHR, textStatus) Ajax 완료 이벤트 핸들러를 지정합니다. Function
data 요청 매개 변수를 지정합니다. Object, String
error(jqXHR, textStatus, errorThrown) Ajax 실패 이벤트 핸들러를 지정합니다. Function
jsonp JSONP 매개 변수 이름을 지정합니다. String
jsonpCallback JSONP 콜백 함수 이름을 지정합니다. String, Function
success(data, textStatus, jqXHR) Ajax 성공 이벤트 핸들러를 지정합니다. Function, Array
timeout 만료 시간을 지정합니다. Number
type 'GET' 또는 'POST'를 지정합니다. String
url 대상 URL을 지정합니다. String
jQuery의 Ajax 관련 메서드
메서드 이름 설명
$.get() get 방식으로 Ajax를 수행합니다.
$.post() post 방식으로 Ajax를 수행합니다.
$.getJSON() get 방식으로 Ajax를 수행해 JSON 데이터를 가져옵니다.
$.getScript() get 방식으로 Ajax를 수행해 Script 데이터를 가져옵니다.
$(selector).load() Ajax를 수행한 후에 선택자로 선택한 문서 객체 안에 응답받을 문자열을 넣습니다.
							$(document).ready(function () {
								$.get('/Home/MyFirstStringAction', function (data) {
									$('body').html(data);
								});
							});			
						
							$(document).ready(function () {
								$.post('/Home/MyFirstStringAction', function (data) {
									$('body').html(data);
								});
							});		
						
							$(document).ready(function () {
								$('body').load('/Home/MyFirstStringAction');
							});	
						
							$(document).ready(function () {
								$.getJSON('/Home/MyFirstJsonAction', function (data) {
									$.each(data, function (key, value) {
										$('body').append('
'+key+' : '+value+'
'); }); }); });
							$(document).ready(function () {
								$.ajax('/Home/MyFirstXMLAction', {
									success: function (data) {
										$(data).find('person').each(function () {
											var name = '
  • ' + $(this).find('name').text() + '
  • '; var gender = '
  • ' + $(this).find('gender').text() + '
  • '; var part = '
  • ' + $(this).find('part').text() + '
  • '; $('body').append('
      ' + name + gender + part + '
    '); }); } }); });
    jQuery Ajax 보조 메서드
    메서드 이름 설명
    serialize() 입력 양식의 내용을 요청 매개 변수 문자열로 만듭니다.
    serializeArray() 입력 양식의 내용을 객체로 만듭니다.
    $.param() 객체의 내용을 요청 매개 변수 문자열로 만듭니다.
    							$(document).ready(function () {
    								// 변수를 선언
    								var data = {
    									name: 'RintIanTta',
    									gender: 'Man',
    									part: 'Guitar'
    								}
    
    								//출력
    								$('body').html('
    '+$.param(data)+'
    '); });

    HTML

    							<form id="my_form">
    								<table border="0" cellpadding="0" cellspacing="0">
    									<tr>
    										<td>
    											<label for='name'>Name</label>
    										</td>
    										<td>
    											<input type="type" name="name" id="name" value=" " />
    										</td>
    									</tr>
    									<tr>
    										<td>
    											<label for='age'>Age</label>
    										</td>
    										<td>
    											<input type="type" name="age" id="age" value=" " />
    										</td>
    									</tr>
    								</table>
    							<input type="submit" value="Get Ajax String" />
    							</form>    
    							<div id="wrap">
    							</div>
    						

    형태1

    							$(document).ready(function () {
    								$('#my_form').submit(function (e) {
    									// 입력양식의 value 속성을 가져옴
    									var name = $('#name').val();
    									var age = $('#age').val();
    
    									// ActionWithData에서 자료를 가져옴
    									var url = '/Home/ActionWithData?name=' + name + '&age=' + age;
    									$('#wrap').load(url);
    
    									// 기본 이벤트를 제거
    									e.preventDefault();
    								});
    							});
    						

    형태2

    							$(document).ready(function () {
    								$('#my_form').submit(function (e) {
    									// 입력양식의 value 속성을 가져옴
    									var name = $('#name').val();
    									var age = $('#age').val();
    
    									// ActionWithData에서 자료를 가져옴
    									var url = '/Home/ActionWithData';
    									var data = {name: name, age: age};
    									var params = $.param(data); 
    									$('#wrap').load(url, params);
    
    									// 기본 이벤트를 제거
    									e.preventDefault();
    								});
    							});
    						

    형태3

    							$(document).ready(function () {
    								$('#my_form').submit(function (e) {
    									// 입력양식의 value 속성을 가져옴
    									var name = $('#name').val();
    									var age = $('#age').val();
    
    									// ActionWithData에서 자료를 가져옴
    									var url = '/Home/ActionWithData';
    									var data = {name: name, age: age};
    									$('#wrap').load(url, data); //$.param()을 사용하지 않고 바로 data 속성에 집어 넣는 방법
    
    									// 기본 이벤트를 제거
    									e.preventDefault();
    								});
    							});
    						

    형태4

    							$(document).ready(function () {
    								$('#my_form').submit(function (e) {
    
    									// ActionWithData에서 자료를 가져옴
    									var url = '/Home/ActionWithData';
    									$('#wrap').load(url, $(this).serialize()); // $(this)는 form#my_form 
    
    									// 기본 이벤트를 제거
    									e.preventDefault();
    								});
    							});
    						

    형태5

    							$(document).ready(function () {
    								$('#my_form').submit(function (e) {
    
    									// ActionWithData에서 자료를 가져옴
    									var url = '/Home/ActionWithData';
    									$('#wrap').load(url, $(this).serialize()); // $(this)는 form#my_form 
    
    									// 기본 이벤트를 제거
    									e.preventDefault();
    								});
    							});
    						

    serialize()와 serializeArray()

    							$(document).ready(function () {
    								$('#my_form').submit(function (e) {
    
    									// ActionWithData에서 자료를 가져옴
    									var url = '/Home/ActionWithData';
    									var serialize = $(this).serialize();
    									var serializeArray = $(this).serializeArray();
    
    									// 출력
    									$("#wrap").append('
    '+serialize+'
    ') $("#wrap").append('
    '+serializeArray+'
    ') // 기본 이벤트를 제거 e.preventDefault(); }); });

    jQuery Ajax 이벤트 핸들링

    jQuery Ajax 이벤트 핸들링 메서드
    메서드 이름 설명
    ajaxComplete() Ajax 요쳥이 완료될 때 이벤트 핸들러를 실행합니다..
    ajaxError() Ajax 요쳥이 실패할 때 이벤트 핸들러를 실행합니다..
    ajaxSend() Ajax 요쳥을 보낼 때 이벤트 핸들러를 실행합니다..
    ajaxStart() Ajax 요쳥을 시작할 때 이벤트 핸들러를 실행합니다..
    ajaxStop() Ajax 요쳥을 중지할 때 이벤트 핸들러를 실행합니다..
    ajaxSuccess() Ajax 요쳥이 성공할 때 이벤트 핸들러를 실행합니다..