"JQuery $.ajax()"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(사용자 5명의 중간 판 14개는 보이지 않습니다)
11번째 줄: 11번째 줄:
**data : 서버로 전달될 데이터 [PlainObject / String / Array]
**data : 서버로 전달될 데이터 [PlainObject / String / Array]
**dataType : 서버로부터 전달 받기를 원하는 데이터 타입 [xml, html, json, text...]
**dataType : 서버로부터 전달 받기를 원하는 데이터 타입 [xml, html, json, text...]
**method : 요청할 HTTP 방식 [GET, POST, PUT..]
**method[type] : 요청할 HTTP 방식 [GET, POST, PUT..]
**success : 요청이 성공할 경우 호출될 함수 [Function(Aything data, String textStatus, jqHXR jqXHR)]
**success : 요청이 성공할 경우 호출될 함수 [Function(Aything data, String textStatus, jqHXR jqXHR)]


==$.ajax()==
==$.ajax()==
*옵션 없이 $.ajax()를 실행하면 단순히 현재 페이지를 불러오며, 그 결과로 아무런 처리를 하지 않음
*옵션 없이 $.ajax()를 실행하면 단순히 현재 페이지를 불러오며, 그 결과로 아무런 처리를 하지 않음
<source lang="javascript">
<syntaxhighlight lang="javascript">
$.ajax();
$.ajax();
</source>
</syntaxhighlight>


==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">
<syntaxhighlight lang="javascript">
$.ajax({
$.ajax({
     url: "http://fiddle.jshell.net/favicon.png",
     url: "http://fiddle.jshell.net/favicon.png",
     beforeSend: function( xhr ) {
     beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
     }
     }
}).done(function( data ) {
}).done(function( data ) {
40번째 줄: 40번째 줄:
     }
     }
});
});
</source>
</syntaxhighlight>


==예시==
==예시==
*예제: http://zetawiki.com/ex/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'>
<syntaxhighlight 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>
</syntaxhighlight>
 
==$.ajax() 디버깅==
*ajax() 요청을 통해 프로그래밍을 하다 에러가 발생 할 경우 어떤 이유로 에러가 발생하는지 알 수 없기 때문에 error() 요소를 사용하여 원인을 알아냄
 
<syntaxhighlight lang="javascript">
    $(document).ready(function(){
        $("#fSubmit").click(function(){
            var dataString = {
                id:$("#fId").val(),
                tag:$("#fTag").val(),
                description:$("#fDescription").val(),
            };
            $.ajax({
                url:"{{route('tag.store')}}",
                method:"POST",
                dataType:"json",
                data:dataString,
                success:function(jData) {
                    $.each(jData, function(key, val){
                        console.log(key);
                        console.log(val);
                    });
                },
                error:function(request,status,error){
                    alert(request.status + "\n" + request.responseText + "\n" + error);
                }
            });
        });
    });
</syntaxhighlight>
 
==$.ajax() 사용시 유의할 점==
*ajax를 통해 form의 값을 전송 할 경우 <input type="submit"....> 형태가 아니나 <button type="button"...> 을 사용하는 것이 좋음. 다시말해 form문이 ajax코드 없이 자체적으로 submit 버튼을 통해 전송 되지 않는지 명확히 한 후 ajax 전송 부분을 구현
<syntaxhighlight lang="HTML">
<form id="form_person">
    <input type="text" id="form_name" placeholder="name">
    <input type="text" id="form_age" placeholder="age">
    <button type="button" id="form_submit">Send</button>
</form>
</syntaxhighlight>


==같이 보기==
==같이 보기==
*[[jQuery $.get()]]
* [[jQuery $.get()]]
*[[jQuery $.post()]]
* [[jQuery $.post()]]
*[[jQuery 웹페이지 읽기]]
* [[jQuery Ajax 이벤트]]
*[[jQuery ajax 스피너 구현]]
* [[jQuery 웹페이지 읽기]]
*[[AJAX]]
* [[jQuery ajax 스피너 구현]]
* [[AJAX]]


==참고 자료==
==참고==
*http://api.jquery.com/jquery.ajax/
*http://api.jquery.com/jquery.ajax/


[[분류: jQuery]]
[[분류: jQuery Ajax]]

2020년 11월 2일 (월) 02:52 기준 최신판

1 개요[ | ]

jQuery.ajax()
$.ajax()
  • 비동기 HTTP 요청 수행
  • jQuery를 통해 보내지는 모든 Ajax 요청의 기본임

2 설명[ | ]

$.ajax(url [, settings])
  • url : 요청될 URL [String 타입]
  • settings : 키/값 형태로 요청과 관련 세부 설정 [PlainObject 타입]
    • data : 서버로 전달될 데이터 [PlainObject / String / Array]
    • dataType : 서버로부터 전달 받기를 원하는 데이터 타입 [xml, html, json, text...]
    • method[type] : 요청할 HTTP 방식 [GET, POST, PUT..]
    • success : 요청이 성공할 경우 호출될 함수 [Function(Aything data, String textStatus, jqHXR jqXHR)]

3 $.ajax()[ | ]

  • 옵션 없이 $.ajax()를 실행하면 단순히 현재 페이지를 불러오며, 그 결과로 아무런 처리를 하지 않음
$.ajax();

4 jqXHR Object[ | ]

  • jqXHR은 jQuery XMLHttpRequest Object임
  • $.ajax()에 의해 리턴된 Object임
  • jqXHR은 각 브라우저의 XMLHttpRequest Object를 모두 포함함. (따라서 responseText, responseXML, getResponseHeader()을 기본적으로 모두 포함)

5 jqXHR Object 예시[ | ]

  • jqXHR은 $.ajax()로 부터 리턴을 받으며 jqXHR은 다양한 메쏘드와 프라퍼티를 함께 가짐. ( Promise interface 참조 )
  • jqXHR의 다양한 메쏘드는 하나 이상의 콜백 함수를 인자로 가지며, $.ajax() 요청이 완료될 때 호출됨
  • 아래 예제의 $.ajax에 의한 요청이 성공적으로 수행되어 jqXHR Object를 돌려 받은 후 done 메쏘드를 실행함. 이때 data는 jqXHR 에서 동일한 형태로 곧장 돌려 받음
$.ajax({
    url: "http://fiddle.jshell.net/favicon.png",
    beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    }
}).done(function( data ) {
    if ( console && console.log ) {
        console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
});

6 예시[ | ]

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.ajax({
	url: "http://example.zetawiki.com/txt/utf8test.txt",
}).done(function(data) {
	document.write(data);
});
</script>

7 $.ajax() 디버깅[ | ]

  • ajax() 요청을 통해 프로그래밍을 하다 에러가 발생 할 경우 어떤 이유로 에러가 발생하는지 알 수 없기 때문에 error() 요소를 사용하여 원인을 알아냄
    $(document).ready(function(){
        $("#fSubmit").click(function(){
            var dataString = {
                id:$("#fId").val(),
                tag:$("#fTag").val(),
                description:$("#fDescription").val(),
            };
            $.ajax({
                url:"{{route('tag.store')}}",
                method:"POST",
                dataType:"json",
                data:dataString,
                success:function(jData) {
                    $.each(jData, function(key, val){ 
                        console.log(key);
                        console.log(val);
                    });
                },
                error:function(request,status,error){ 
                    alert(request.status + "\n" + request.responseText + "\n" + error);
                }
            });
        });
    });

8 $.ajax() 사용시 유의할 점[ | ]

  • ajax를 통해 form의 값을 전송 할 경우 <input type="submit"....> 형태가 아니나 <button type="button"...> 을 사용하는 것이 좋음. 다시말해 form문이 ajax코드 없이 자체적으로 submit 버튼을 통해 전송 되지 않는지 명확히 한 후 ajax 전송 부분을 구현
<form id="form_person">
    <input type="text" id="form_name" placeholder="name">
    <input type="text" id="form_age" placeholder="age">
    <button type="button" id="form_submit">Send</button>
</form>

9 같이 보기[ | ]

10 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}