Category Archives: Javascript

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

$.ajax({

[jquery] Form Reset 방법

– $(“#formName”).reset(); or $(“form”).reset(); — 작동하지 않음

1. 특정 form reset

// 첫번째 form reset
$(document).ready(function() {
 $("#btnReset").click(function() {
 $("form")[0].reset();
 });
 });

// 특정 id form reset
 $(document).ready(function() {
 $("#btnReset").click(function() {
 $("form").each(function() {
 if(this.id == "frmId") this.reset();
 });
 });
 });

 // 특정 class form reset
 $(document).ready(function() {
 $("#btnReset").click(function() {
 $("form").each(function() {
 if(this.className == "frmClass") this.reset();
 });
 });
 });

 

2. 전체 form reset

$(document).ready(function() {
 $("#btnReset").click(function() {
 $("form").each(function() {
 this.reset();
 });
 });
});

– 삭제

.detach() : 지정한 요소를 포함 하위 요소 모두 제거

/ $(“div”).detach();    // div를 포함 하위 요소 모두 제거

.empty() : 지정한 요소의 하위 요소를 제거

/ $(“div”).empty();    // div 하위 요소 모두 제거

.remove() : 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거

/ $(“div”).remove();    // div 포함 하위 요소, 이벤트, 데이터 모두 제거

– 변경, 변환

.text() : 해당 요소에 text 요소를 삽입 또는 변경한다.

.html() : 해당 요소에 html 요소를 삽입 또는 변경한다.

.val() : 해당 요소의 value 값을 삽입 또는 변경한다.

.replaceAll() : 해당 요소들로 인자 요소를 대체한다.

/ $(‘<h2>New heading</h2>’).empty($(“div”));    

                                 // div 요소를 <h2>New heading</h2> 요소로 변경한다.

.replaceWith() : 해당 요소들을 인자의 요소로 바꾼다.  ; replaceAll() 과 선택,인자(target)이 반대

/ $(“div”).empty(‘<h2>New heading</h2>’);    

                              //  <h2>New heading</h2> 요소로 div 요소를 변경 시킨다.

.toArray() : 선택한 요소 DOM 집합을 자바스크립트 배열로 만든다.

/ var arr = $(“div”).toArray();    //  arr[0] === <div>Hello</div>

$.makeArray <jQuery.makeArray()> : jQuery 집합의 요소 값을 JavaScript 배열로 변환한다.

/ var arr = $.makeArray($(“input”));      //  arr[0] === “Hello”

$.map() <jQuery.map()>
.map() : 선택된 배열 요소를 순서대로 callback 함수를 통해 얻어진 리턴값을 포함하는 새로운 jQuery 오브젝트 생성

/ var arr = $(“div”).map(function(){

           return $(this).text().toUpperCase();      // 선택된 요소들의 text값을 대문자로 변경한다.

         });

    / var arr = $(“div”).map({width : 10, height: 15} ,function(value, index){

           return index;      //  key를 반환한다.  [“width”, “height”]

         });

$.globalEval() <jQuery.globalEval()> : 문자열로 명령어를 실행시켜준다.

/ $.globalEval(“var newVar = true;”)      // newVar == true

$.merge() <jQuery.merge()> : 두개의 배열을 첫번째 배열에 합칩니다.

/ $.merge([0,1,2],[2,3,4]);      // 첫번째 배열 결과 : [0,1,2,2,3,4]

    / $.merge($.merge([],[0,1,2]),[2,3,4]);      

                                     // 첫번째 배열의 값을 유지하기 위해 새로운 배열을 만든다. 

$.trim() <jQuery.trim()> : 문자열 앞뒤에 있는 공백 문자를 제거하고 결과 반환

/ var trimStr = $.trim(str);      // str === ”   abc def ff  “;    trimStr === “abc def ff”;

$.unique() <jQuery.unique()> : element 배열의 중복된 모든 element를 제거한다. ; string, number 배열에서는 동작 X

/ var divs = $.unique(divs);      // divs의 중복 선택되어 들어간 element를 제거한다.

$.parseJSON() <jQuery.parseJSON()> : JSON문자열을 JavaScript object로 반환한다.

/ var obj = $.parseJSON(‘{“name”:”John”}’);     

                                 // 문자열 {“name”:”John”}을 JavaScript object로 변환한다.

    / alert(obj.name===”John”);     // JavaScriptObject인 obj에서 name 요소인 John

    – 참고 : 형식이 어긋난 JSON 문자열을 인자로 사용하면 exception이 발생한다.

               문자열의 key 와 value 는 쌍따옴표(“”)를 사용해야 한다.

$.parseXML() <jQuery.parseXML()> : 유효한 XML문서를 파상한다.

$title = $.parseXML(xml).find(“title”);  // xml 파일에서 title의 값을 찾는다.

– 확장

$.noop() <jQuery.noop()> : 비어있는 함수 (function(){})

$.noConflict() <jQuery.Conflict()> : 다른 JavaScript 라이브러리와 함께 사용할때 $의 충돌을 막기위해 사용

$.sub() <jQuery.sub()> : 새로운 jQuery 함수를 정의할때, 네임스페이스의 충돌로 다른 개발자의 함수에 영향을 주지 않도록 캡슐화된 플러그인을 만들고자 할때 $.sub() 로 복사하여 사용

  (function(){
    var sub$ = jQuery.sub();
    sub$.fn.myCustomMethod = function(){
      return 'just for me';
    };

    sub$(document).ready(function() {
      sub$('body').myCustomMethod() // 'just for me'
    });
  })();

  typeof jQuery('body').myCustomMethod // undefined

$.extend() <jQuery.extend()> : 첫번째 인자에서 두번째 인자를 병합하며, 확장한다.

(1) 두번째 인자값이 첫번째 인자값의 같은 옵션을 대체하며 확장

var object1 = { apple : 0,  banana : {weight : 52, price : 100}, cherry : 97 };

var object2 = { banana : {price : 200},  durian : 100 };

$.extend(object1, object2);

결과 : object1 = { apple: 0, banana: { price: 200 }, cherry: 97, durian: 100 };

        (2) 첫번째 인자값의 원본 값을 유지하며 병합

var object1 = {  apple: 0,  banana: {weight: 52, price: 100},  cherry: 97};

var object2 = {  banana: {price: 200},  durian: 100};

$.extend(true, object1, object2

결과 : object1 == { apple: 0, banana: { weight: 52, price: 200 }, cherry: 97, durian: 100 }

             (3) 요소에 적용할 명령어 확장

$.fn.extend({

myMethod : function(){…}

});

-> $(“div”).myMethod();

(4) 함수 실행 JQuery 명령어 확장

$.extend({

myMethod2 : function(){…}

});