[jquery][asp.net mvc] ajax (post) 예제

안녕하세요. 저의 첫번째 포스팅입니다. :)

오늘의 포스팅은 asp.net mvc에서 ajax(post) 예제에 대해서 정리하였습니다.

 

1. 소스코드

 

	function regist() {
		var group_name_kor = $('#group_name_kor').val();
		var group_name_jpn = $('#group_name_jpn').val();
		var group_name_chn = $('#group_name_chn').val();
		var group_name_eng = $('#group_name_eng').val();
		
		var memberid_list = "";
		for(var i=0; i< $("#add option").size(); i++) {
			memberid_list += add.options[i].value + " " ;
		}
	}

 

 

jqueary를 사용해서 html의 value 값들을 가져옵니다.

아래의 for문은

"add"라는 SELECT BOX에서 선택된 항목의 OPTION VALUE와 TEXT만을 가져오는 예제가 아니라,
MULTIPLE SELECT 박스에 있는 모든 항목의 OPTION VALUE와 TEXT를 가져오는 예제입니다.

 

2. ajax 사용 소스코드를 보여드릴게요!

$.ajax({
	url : "/registgroup/registgroupinfo",
	type : "POST",
	data : {
		group_name_kor : group_name_kor, group_name_jpn : group_name_jpn, group_name_chn : group_name_chn, group_name_eng : group_name_eng
	},
	success: function(data) {
		alter("등록성공");
	},
	error:function(request,status,error){
		alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
	}
});

 

 

 

post방식의 ajax입니다.

서버에서 데이터를 http post방식으로 전송한 후 서버 측의 응답을 받을 경우 사용합니다.

 

**

가장 위 url은 ajax가 요청 할 url을 써줍니다.

type으로는 get과 post가 있겠죠.

data는 요청과 함께 서버에 보낼 데이트들을 적어줍니다.

success는 요청이 성공일 때 실행되는 callback 함수입니다.

error은 에러가 발생 할 경우 에러 발생에 대해 알려줍니다.

 

3. asp.net에서 ajax 요청 받는 방법

 

[HttpPost]
         public JsonResult RegistGroupInfo(string group_name_kor, string group_name_jpn, string group_name_chn, string group_name_eng, string memberid_list)
         {
	          List<string> result = new List<string>();
	          return Json(result, JsonRequestBehavior.AllowGet);
         }

 

 

클라이언트 쪽에서 ajax로 요청 후 asp.net mvc의 controller에서는 return 값이 있을 경우에 JsonResult 형식의 함수로 받아줍니다.

return 값이 있다면 ajax의 success에서 function(data)에서 data로 return 값이 들어오게되고 json형태로 받을 수 있습니다.