출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.


이전글보기

 - jQuery AJAX (1) - load()메소드


jQuery get, post 메소드는 서버로부터 HTTP GET or POST 데이터를 요청하기 위해 사용한다. 

두 메소드는 보통 클라이언트와 서버 사이의 요청과 응답을 위해 사용된다. 


GET : 지정된 리소스로부터 데이터를 요청한다.

POST : 처리할 데이터를 지정된 리소스에 제출한다.


GET은 기본적으로 서버로부터 데이터를 가져온다. 

POST도 서버로부터 데이터를 가져오지만 데이터를 캐시하지 않는다. 그리고 보통 요청으로부터 데이터를 보내는데 사용된다. 


정확한 이해를 위해 HTTP GET, POST에 대한 부분을 공부할 필요가 있다.

https://www.w3schools.com/tags/ref_httpmethods.asp


예를 들어 클라이언트는 HTTP request를 서버로 제출한다. 그리고 서버는 클라이언트에게 응답을 리턴한다. 응답은 요청에 대한 상태 정보를 포함하고 요청된 내용도 포함한다. 


- GET 메소드

ex) /test/demo_form.php?name1=value1&name2=value2

- POST 메소드 -> url이 아닌 HTTP message body 안에 데이터 등을 담아 보낸다.


번역이 매끄럽지 않지만 이해가 되는 정도에서 정리하고 넘어간다.



jQuery $.get() 메소드

-> jQuery $.get() 메소드는 HTTP GET request에 따라 서버로부터 데이터를 요청한다. 

-> $.get(URL, callback);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test.asp",function(data, status){
              alert("Data : " + data + "\nStatus : " + status);      
        });
    });
});
 
</script>
</head>
<body>
 
<button>Send an HTTP GET request to a page and get the result back</button>
 
</body>
</html>
cs


$.get( )의 첫번 째 파라미터는 URL이다. 우리는 demo_test.asp를 요청하기를 원했다.

두 번째 파라미터는 콜백함수이다. 첫번 째 콜백 파라미터는 요청된 페이지의 내용을 담는다. 두번 째 콜백함수 파라미터는 요청에 대한 상태 값을 담는다(ex 성공 시 success)


jQuery $.post() 메소드

-> jQuery $.post() 메소드는 HTTP POST 요청을 사용하는 서버로부터 데이터를 요청한다.

-> $.post(URL, data, callback);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 
$(document).ready(function(){
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
            name : "Moondol",
            city : "Seoul"
        },
        function(data, status){
            alert("data : " + data + " \nStatus : " + status);
        });
    });
});
 
</script>
</head>
<body>
 
<button>Send an HTTP POST request to a page and get the result back</button>
 
</body>
</html>
 
cs


저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery 기본(선택자)  (0) 2017.10.20
jQuery contains(), has() Selector  (0) 2017.08.28
jQuery AJAX (1) - load()메소드  (0) 2017.08.25
jQuery Traversing 가로지르기? 횡단하기? (3) Siblings  (0) 2017.08.24
jQuery Traversing 가로지르기? 횡단하기? (2) Descendants  (0) 2017.08.23

+ Recent posts

티스토리툴바