javascript

Ajax Post 전송

neodada09 2020. 10. 7. 15:01

웹페이지에서 서버로 데이터 전송시, 아마 요즘 가장 많이 사용하는 방법이 ajax 호출일겁니다.
이중에서도 get/post방식을 주로 사용할 건데, get방식은 서버url에 파라미터를 붙이는 방식입니다. 편하기도 하고, 공유하기도 좋긴 한데, 파라미터가 눈으로 보이니 보안에 좀 취약합니다.
그래서 아이디나 비밀번호 전송시에는 보통 post방식을 사용합니다.(물론 fiddler 등 네트워크 패킷을 까보면 다 나오긴 합니다만...)
그럼 post샘플을 한번 작성해 보겠습니다.

—- 아래와같은 조건일 경우—-
Id 입력 textbox id : txtId
비밀번호 입력 textbox id : txtPWd
로그인버튼 id: btnLogin
—-
$(‘#btnLogin’).click(function(){
var id = $(‘#txtId’).val();
var pwd = $(‘#txtPwd’).val();

var info = {
id : id,
pwd : pwd
};
var result = JSON.stringify(info);//json형태로 전송시 사용.
$.ajax({
method : ‘post’,
url : ‘웹서비스 주소’,
contentType : ‘application/json’,
data : result
}).done(function(data){
alert(‘반갑습니다.’);
});
});

—-
위와 같이 form의 엘리먼트값들을 객체화 하고, 이를 시리얼라이즈해서 json형태로 말아서 서버로 전송되는것이 핵심입니다.

다음시간에는 서버에서 어떻게 받아서 처리해야되는지 알아보겠습니다.