편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
최신판 | 당신의 편집 | ||
16번째 줄: | 16번째 줄: | ||
==$.ajax()== | ==$.ajax()== | ||
*옵션 없이 $.ajax()를 실행하면 단순히 현재 페이지를 불러오며, 그 결과로 아무런 처리를 하지 않음 | *옵션 없이 $.ajax()를 실행하면 단순히 현재 페이지를 불러오며, 그 결과로 아무런 처리를 하지 않음 | ||
< | <source lang="javascript"> | ||
$.ajax(); | $.ajax(); | ||
</ | </source> | ||
==jqXHR Object== | ==jqXHR Object== | ||
29번째 줄: | 29번째 줄: | ||
* jqXHR의 다양한 메쏘드는 하나 이상의 콜백 함수를 인자로 가지며, $.ajax() 요청이 완료될 때 호출됨 | * jqXHR의 다양한 메쏘드는 하나 이상의 콜백 함수를 인자로 가지며, $.ajax() 요청이 완료될 때 호출됨 | ||
* 아래 예제의 $.ajax에 의한 요청이 성공적으로 수행되어 jqXHR Object를 돌려 받은 후 done 메쏘드를 실행함. 이때 data는 jqXHR 에서 동일한 형태로 곧장 돌려 받음 | * 아래 예제의 $.ajax에 의한 요청이 성공적으로 수행되어 jqXHR Object를 돌려 받은 후 done 메쏘드를 실행함. 이때 data는 jqXHR 에서 동일한 형태로 곧장 돌려 받음 | ||
< | <source lang="javascript"> | ||
$.ajax({ | $.ajax({ | ||
url: "http://fiddle.jshell.net/favicon.png", | url: "http://fiddle.jshell.net/favicon.png", | ||
40번째 줄: | 40번째 줄: | ||
} | } | ||
}); | }); | ||
</ | </source> | ||
==예시== | ==예시== | ||
*예제: http://example.zetawiki.com/jquery/jquery_ajax.html | *예제: http://example.zetawiki.com/jquery/jquery_ajax.html | ||
*예제에서 불러오는 웹페이지: http://example.zetawiki.com/txt/utf8test.txt | *예제에서 불러오는 웹페이지: http://example.zetawiki.com/txt/utf8test.txt | ||
< | <source lang='html5'> | ||
<script src="//code.jquery.com/jquery.min.js"></script> | <script src="//code.jquery.com/jquery.min.js"></script> | ||
<script> | <script> | ||
54번째 줄: | 54번째 줄: | ||
}); | }); | ||
</script> | </script> | ||
</ | </source> | ||
==$.ajax() 디버깅== | ==$.ajax() 디버깅== | ||
*ajax() 요청을 통해 프로그래밍을 하다 에러가 발생 할 경우 어떤 이유로 에러가 발생하는지 알 수 없기 때문에 error() 요소를 사용하여 원인을 알아냄 | *ajax() 요청을 통해 프로그래밍을 하다 에러가 발생 할 경우 어떤 이유로 에러가 발생하는지 알 수 없기 때문에 error() 요소를 사용하여 원인을 알아냄 | ||
< | <source lang="javascript"> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
$("#fSubmit").click(function(){ | $("#fSubmit").click(function(){ | ||
84번째 줄: | 84번째 줄: | ||
}); | }); | ||
}); | }); | ||
</ | </source> | ||
==$.ajax() 사용시 유의할 점== | ==$.ajax() 사용시 유의할 점== | ||
*ajax를 통해 form의 값을 전송 할 경우 <input type="submit"....> 형태가 아니나 <button type="button"...> 을 사용하는 것이 좋음. 다시말해 form문이 ajax코드 없이 자체적으로 submit 버튼을 통해 전송 되지 않는지 명확히 한 후 ajax 전송 부분을 구현 | *ajax를 통해 form의 값을 전송 할 경우 <input type="submit"....> 형태가 아니나 <button type="button"...> 을 사용하는 것이 좋음. 다시말해 form문이 ajax코드 없이 자체적으로 submit 버튼을 통해 전송 되지 않는지 명확히 한 후 ajax 전송 부분을 구현 | ||
< | <source lang="HTML"> | ||
<form id="form_person"> | <form id="form_person"> | ||
<input type="text" id="form_name" placeholder="name"> | <input type="text" id="form_name" placeholder="name"> | ||
94번째 줄: | 94번째 줄: | ||
<button type="button" id="form_submit">Send</button> | <button type="button" id="form_submit">Send</button> | ||
</form> | </form> | ||
</ | </source> | ||
==같이 보기== | ==같이 보기== | ||
104번째 줄: | 104번째 줄: | ||
* [[AJAX]] | * [[AJAX]] | ||
==참고== | ==참고 자료== | ||
*http://api.jquery.com/jquery.ajax/ | *http://api.jquery.com/jquery.ajax/ | ||
[[분류: jQuery | [[분류: jQuery]] | ||
[[분류: ajax]] |