NodeJS에서 Ajax를 이용한 GET / POST 통신 기본 예제
화면에서 GET 버튼을 클릭하면 GET 방식을 통해 ''GET METHOD CALL' 문자열을 인자값으로 서버에 전송한다.
서버에서는 인자로 넘겨받은 문자열에 'Succese' 문자열을 더하여 결과값을 반환한다.
POST 방식도 동일한 방법으로 구현하였으니 설명은 생략하겠다.
아래의 코드를 참고.
<test.html>
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <!doctype html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $('#getMethod').click(function() { var get = 'GET METHOD CALL'; //Ajax GET Method TEST $.ajax({ url: '/api/get', dataType: 'json', type: 'GET', data: {data:get}, success: function(result) { if (result) { $('#get_output').html(result.result); } } }); }); $('#postMethod').click(function() { var post = 'POST METHOD CALL'; //Ajax POST Method TEST $.ajax({ url: '/api/post', dataType: 'json', type: 'POST', data: {data:post}, success: function(result) { if (result) { $('#post_output').html(result.result); } } }); }); }); </script> <style media="screen"> div{ text-align: center; } </style> </head> <body> <h2>Ajax 기본 테스트</h2> <div style="border: 3px solid gray; width: 180px;"> <h2>GET</h2> <button id='getMethod'>GET</button> <p id ='get_output'> get </p> </div> <div style="border: 3px solid gray; width: 180px;"> <h2>POST</h2> <button id='postMethod'>POST</button> <p id ='post_output'> psot </p> </div> </body> </html> | cs |
<app.js>
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 29 30 31 32 33 34 35 36 37 | //AJAX GET METHOD app.get('/api/get',function(req,res) { var data = req.query.data; console.log('GET Parameter = ' + data); var result = data + ' Succese'; console.log(result); res.send({result:result}); }); //AJAX POST METHOD app.post('/api/post', function(req, res){ var data = req.body.data; console.log('POST Parameter = ' + data); var result = data + ' Succese'; console.log(result); res.send({result:result}); }); | cs |
▶Ajax 호출 전 화면
▶Ajax 호출 후 화면
서버 요청에서 인자값(쿼리 스트링이라고도 함)을 사용하는 방법
▶GET 방식
>> req.query.(name)
▶POST 방식
>> req.body.(name)
○시멘틱 URL에 포함된 정보 사용하는 방법