Ajax formdata 전송

전 포스팅 글에서 ajax post 전송방법에 대해 알아오았습니다. 포스트방식을 많이 쓰고 있지만, 파일 전송이라던지, 많은 input값을 가지고 있을 경우에는 form 전체를 전송하던지, formdata 객체를 활용해 form의 일부 엘리먼트값을 전송하기도 합니다.

아래는 html 일부의 샘플을 보여줍니다.
//test.html
<form id=“form1”>
<input type=“text” id=“txtId” />
<input type=“text” id=“txtPwd” />
...
<input type=“button” id=“btnLogin” value=“로그인” />
</form>

아래는formdata객체를 활용해서, 서버로 submit 하는 샘플입니다. 폼 전체를 전송할수 있지만, 꼭 필요한 객체만 전송하는 방법을 예로 들었습니다. FormData 객체는 append함수를사용하는데, 파라미터는 key, value 두개를 받습니다.

//test.js
$(‘#btnLogin’).click(){

var formData = new FormData();
formData.append(“txtId”, $(‘#txtId’).val());
formData.append(“txtPwd”,$(‘#txtPwd’).val());

});

이렇게 서버로 던진경우, asp.net web api 를 기준으로 서버에서 받는 예시를 보여드립니다.

[HttpPost]
Public void Insert()
{
var id = HttpContext.Current.Request.Form[“txtId”].ToString();
var pwd =
HttpContext.Current.Request.Form[“txtPwd”].ToString();
}

위와같이 Request Form 데이터로 받으시면 됩니다.