AJAX 파일전송 SUBMIT

입력단

var option = {
 type : "post",
 url : url,
 data : param,
 enctype: 'multipart/form-data',
 encoding : 'multipart/form-data',
 success : callback
 };
$("#almFollowUPForm").ajaxSubmit(option);

controller 단에서
int result = businessService.almFollowUpInsert(almFlwUpSearchBean);
response.setStatus(HttpServletResponse.SC_OK);
response.setContentType("text/html");
response.getOutputStream().println(result);

function comboChange() {
 var options = {
 success : showInitResponse,
 url : "/path/test.action",
 contentType : "application/x-www-form-urlencoded;charset=UTF-8",
 type : "post", /* get, post */
 dataType : "html" /* xml, html, script, json */
 };
 $('#INIT').ajaxSubmit(options);
 }

// post-submit callback
 function showInitResponse(responseText, statusText) {
 //submit후 작업부분
 document.getElementById('result').innerHTML = responseText;
 }

<s:form name="INIT" action="INIT" theme="simple" method="post">
 <s:select id="apiId" name="apiId" list="#{'INBO01':'INBO01', 'INTC02':'INTC02'}" onchange="javascript:comboChange();"></s:select>
</s:form>

<div id="result"/>

이번 포스팅은 jQuery의 ajaxSubmit 함수닷 !

이전에는 ajax 통신에 ajax 함수나 post 함수를 써서 데이터 주고받고 했었는데,

입력 폼이 있고 그 폼값으로 submit 할때에는 이 ajaxSubmit 함수가 더 유용하다.

이 함수를 사용하면 submit 이전에 처리할 작업과 submit 후의 작업을 따로 정리할 수 있어서 소스 가독성도 높일 수 있다 ! 

// ajaxSubmit 사용하기

// ajaxSubmit Form
<form id="frmApply" method="post" action="./testAjax.html" onSubmit="return false;">
 <input type="hidden" name="f_data1" value="">
 <input type="hidden" name="f_data2" value="">
 <input type="hidden" name="f_data3" value="">
 <input type="hidden" name="f_data4" value="">
</form>

// ajaxSubmit Call Button
<a href="#" id="ajaxSubmitBtn" >ajaxSubmit Call</a>

// javascript ajaxForm controll
<script type="text/javascript">

var options = {
 beforeSubmit : "",
 success : "",
 dataType : 'json'
};

$(function(){

 $("#ajaxSubmitBtn").click(function(e){
 e.preventDefault();
 apply();
 });

});

function apply()
{
 // ajaxSubmit Option
 options = {
 beforeSubmit : applyBefore, // ajaxSubmit 전처리 함수
 success : applyAfter, // ajaxSubmit 후처리 함수
 dataType : 'json' // 데이터 타입 json
 };
 // frmApply Form Data값을 testAjax.html 으로 ajax 전송
 $("#frmApply").ajaxSubmit(options);
}

function applyBefore(formData, jqForm, options)
{

 // ajaxSubmit 전 처리 작업 영역

 return true;
}

function applyAfter(objResponse, statusText, xhr, $form)
{
 if (statusText == "success") {
 // ajax 통신 성공 후 처리영역
 if (objResponse.strResult == "SUCCESS" ) {
 // 리턴받은 json 배열의 strResult 값이 "SUCCESS"일 경우 처리영역
 } else {
 // SUCCESS 이외의 값으로 리턴됐을 경우 처리영역
 }
 } else {
 // ajax 통신 실패 처리영역
 }
}

</script> remote = origin merge = refs/heads/br1