ajax form submit

- JSP

<form id="postSaveForm" name="postSaveForm" enctype="multipart/form-data">

<div class="row uniform">

<div class="12u$">

<div class="select-wrapper">

<select name="category" id="category" alt="카테고리">

<option value="">- Category -</option>

<option value="0">나의</option>

<option value="1">소중한</option>

<option value="2">일상</option>

</select>

</div>

</div>

<div class="12u$">

<input type="text" name="title"  id="title" value="" placeholder="Title" maxlength="500" alt="제목" required/>

</div>

<div class="12u$">

<input type="text" name="subTitle" id="subTitle" value="" placeholder="Sub Title" alt="부제목" />

</div>

<div class="12u$">

<textarea name="contents" id="contents" rows="50" cols="10">

</textarea>

<script>

// Replace the <textarea id="editor1"> with a CKEditor

// instance, using default configuration.

CKEDITOR.replace( 'contents', {

filebrowserUploadUrl: '${pageContext.request.contextPath}/file/ckeditorImageUpload.do'

});

</script>

</div>

<div class="12u$">

<ul class="actions">

<li><input type="button" id="postSave" value="Save" style="background-color:rgb(54, 64, 80);"/></li>

<li><input type="reset" id="postCancle" value="Cancle" /></li>

</ul>

</div>

</div>

</form>

- Java Script

//post regist save ajax

$("#postSave").click(function() {

CKupdate();

var formData = $("#postSaveForm").serialize();

console.log(formData);

$.ajax({

type : "POST",

url : getContextPath()+"/post/postSave.do",

cache : false,

data : formData,

dataType : "json",

success : function(res) {

if (res.result == "200") {

alert("등록이 정상적으로 되었습니다.");

$(location).attr('href',getContextPath()+'/main.do'); //메인화면으로 이동

} else if (res.result == "400") {

alert("등록이 실패하였습니다.");

}

},

error : onError

});

});

//ajax on error

function onError(data, status) {

alert("ajax error");

}

//AJAX 로 폼의 데이터를 전송할 때 CKEDITOR로 변환 된 textarea값을 다시 변경해줘야 데이터가 전달된다.

function CKupdate(){

    for ( instance in CKEDITOR.instances )

        CKEDITOR.instances[instance].updateElement();

}