jQuery Action (ajax 전송 컨트롤러, 유효성검사, 데이타 변경, 인터셉터 이벤트) "샤쿠 개발 블로그 @syaku"

jQuery Action (ajax 전송 컨트롤러, 유효성검사, 데이타 변경, 인터셉터 이벤트)

2013. 5. 25. 21:48 개발노트/jQuery /234

written by Seok Kyun. Choi. 최석균

jQuery Action (ajax 전송 컨트롤러, 자료검사, 자료변경, 인터셉터 이벤트)

※ 언어 : JavaScript

※ 필수 라이브러리 : jQuery 1.3.2 이상

※ License : GNU Lesser General Public License

# 현재 버전 (Github)

※ 프로젝트 사이트 : https://github.com/syakuis/jquery-action

※ 데모 : http://syakuis.github.io/demo/jquery-action/demo/index.html

# 2.0.7 이하 버전 (구글 프로젝트)

※ Project Home : http://code.google.com/p/jquery-action

※ SVN : http://jquery-action.googlecode.com/svn/trunk/action

※ Download : http://code.google.com/p/jquery-action/downloads/list

※ Document : https://docs.google.com/Doc?docid=0AWNiF48pXz7hZGZrN3hwejRfMTlrd2ttczVkYw&hl=ko

jQuery Action (액션) 은 주기적으로 자주 사용되는 자바스크립트 함수들을 모아 쉽게 재사용할 수 있는 라이브러리화한 자바스크립트 프로그램입니다.

자바스크립트에서 ajax 혹은 submit 이벤트가 실행되었을때 해야할 일련의 작업들을 다양한 시나리오 구성으로 손쉽게 구현할 수 있게 도와주는 전송 컨트롤러 프레임워크입니다.

액션은 jQuery 에 의존하므로 jQuery 1.3.2 이상 라이브러리가 필요하며, 이하버전에서도 가능하나 보장할 수 없습니다.

# 개발자 : 최석균. Seok Kyun. Choi. (Syaku)

# 개발자 블로그 : http://syaku.tistory.com

# jQuery Action Post : http://syaku.tistory.com/164

* jaAction 은 다음과 같은 기능을 제공합니다.

1) 데이터 필터링

데이터 입력 값 존재 체크 : 값을 입력 , 선택 , 체크 하였는 가를 체크함.

데이터 입력 값의 형태 체크 : 값이 숫자 , 영문 , 한글 , 한영조합 등등 인가를 체크함.

데이터 입력 값의 길이 체크 : 입력한 글자 수를 체크함.

데이터 입력 값의 비교 : 두개의 입력 값이 같은지 체크함.

데이터 선택 수 체크 : 라디오 및 체크 박스의 선택 수를 체크함.

데이터 정규표현식 체크 : 정규표현식을 이용하여 데이터 값 체크. 주로 이메일, 주민등록번호, 홈페이지 등등 정규표현식을 이용하여 입력한 값이 패턴과 일치한지를 체크함. 정규표현식을 계속적으로 추가할 수 있음.

2) 상황에 맞는 메세지 출력

데이터 필터링에서 부적합할 경우 그에 따를 메세지를 출력함.

모든 작업이 완료되었을 때 전송여부를 확인하기 위한 메세지를 출력함.

3) 메세지 국제화

액션은 메세지가 분리되어 있어 국제화 할 수 있습니다.

4) 자료변경

액션은 임의적으로 데이터를 수정할 수 있습니다.

한개의 폼 태그에서 여러 개의 액션을 구성하려고 할때 폼 속성을 수정해야 합니다.

예를들어 목록 게시판에 자료를 지우려는 함수, 자료를 수정하려는 함수가 있을 경우 각 폼 속성의 액션 경로가 다를 수 있습니다.

이럴때 액션을 이용하여 폼 속성을 수정할 수 있으며 또한 내부의 객체(input , select 등등)의 값들을 수정하거나 객체를 임의적으로 생성하여 값을 부여할 수 있습니다.

5) 롤백

액션이 진행되는 과정에서 취소가 되었을 때 변경된 자료를 모두 원래대로 되돌려 놓습니다.

예를들어 목록 게시판에 자료를 지우려는 함수를 실행하였고 취소했다고 가정하였을때… 폼 속성의 액션 경로는 지우는 페이지 경로일 것입니다.

이때 목록 게시판에서 검색 이벤트가 실행될 경우 데이터가 손실될 수있습니다. 그뿐 아니라 인터페이스가 불확실하게 되어 사용자에게 혼동을 줄 수 있습니다. 롤백 기능은 이런 것들을 방지할 수 있습니다.

6) 결과를 이용한 상황 처리

액션을 이용하여 서버로 전송 후 결과를 받은 값을 이용하여 다양한 상황을 구현할 수 있습니다.

메세지를 출력하거나, 특정 페이지로 이동하거나, 특정 함수를 호출할 수 있습니다.

7) 인터셉터

액션을 실행하고 일련의 작업을 진행하기 전 후 상황에 맞는 시나리오를 구성할 수 있게 임의적인 함수를 호출할 수 있습니다.

액션이 실행되기 전에 일부 값을 수정하거나, 실행 후 페이지를 새로고침하거나 페이지를 이동시킬 수 있는 함수를 만들어 실행 시킬수있습니다.

<html>
<head>
<meta content="jQuery Action" name="Generator" />
<meta content="Seok Kyun. Choi. (http://syaku.tistory.com)" name="Programmed" />
<script type="text/javascript" language="javascript" charset="UTF-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript" charset="UTF-8" src="../jquery.action.js"></script>
<script type="text/javascript" language="javascript" charset="UTF-8" src="../jquery.action-ko.js"></script>
<link rel="stylesheet" type="text/css" charset="UTF-8" href="../jquery.action.css" />
</head>

<body>

<script type="text/javascript">

function onSubmit() {
  jQuery('#form_input').jaAction({ 
      values : 'mod=update' // mod 인풋박스의 값을 update 변경함.
    , formAttr : 'action=./save.html' // form 속성의 action 을 ./save.html 변경함.
    , send : 'submit' // form 을 submit 으로 전송함.
    , filter : [
        // #user_id 의 값이 없거나, user_id 형식의 값이 아니고 입력길이가 2자이상 4자이하가 아닌경우 아이디 .... 메세지 alert 창을 출력함.
        { target : "#user_id", params : "&filter=notnull&filter=user_id&length=2,4&title=아이디" }
        // #name 최대길이 10자이상을 넘을 경우 성명 .... 메세지 alert 창을 출력합니다.
      , { target : "#name", params : "&filter=notnull&max_length=10&title=성명" }
      , { target : "#pwd", params : "&filter=notnull&max_length=40&title=비밀번호" }
        // #pwd2 가 #pwd 의 값과 다를 경우 비밀번호 확인 .... 메세지 alert 창을 출력합니다.
      , { target : "#pwd2", params : "&filter=notnull&max_length=40&#pwd=!#pwd2&title=비밀번호 확인" }
      , { target : "#email", params : "&filter=email&title=메일" }
      // #age 의 값이 숫자가 아니거나, 50이상으로 입력한 경우 나이 ... 메세지 alert 창을 출력합니다.
      , { target : "#age", params : "&filter=notnull&filter=number&num=50&title=나이" }
      , { target : "#job", params : "&filter=notnull&title=직업" }
      // input:radio[name=sex] 의 라디오박스 선택수가 0개인 경우 성별 ... 메세지 alert 창을 출력합니다.
      , { target : "input:radio[name=sex]", params : "&selected=1&title=성별" }
      // input:radio[name=s] 의 체크박스 선택수가 2개이상 3개이하가 아닌 경우 취미 ... 메세지 alert 창을 출력합니다.
      , { target : "input:checkbox[name=s]", params : "&selected=2,3&title=취미" }

    ]
    , ask : 'update' // confirm 메세지 출력
    , beforeAction : function() { // jaAction 메서드가 실행되기 전에 beforeAction 함수를 실행함. return false; 인 경우 jaAction 종료함.
      var ja = $.jaFilter._filtering(jQuery('input:radio:[name=is]'),'&selected=1&value=1');
      if (ja.error) { alert("동의를 선택하세요."); return false;} 
    }

  });
}

</script>

<form id="form_input" method="post" action="">
hidden box : <input type="text" id="mod" name="mod" value="insert" />

<table border="1">
  <tr>
    <td colspan="2"><input type="button" value="저장" onclick="onSubmit();" /></td>
  </tr>
  <tr>
    <th>아이디</th>
    <td><input type="text" id="user_id" name="user_id" /></td>
  </tr>
  <tr>
    <th>이름</th>
    <td><input type="text" id="name" name="name" /></td>
  </tr>
  <tr>
    <th>비밀번호</th>
    <td><input type="text" id="pwd" name="pwd" /></td>
  </tr>
  <tr>
    <th>비밀번호 확인</th>
    <td><input type="text" id="pwd2" name="pwd2" /></td>
  </tr>
  <tr>
    <th>메일주소</th>
    <td><input type="text" id="email" name="email" /></td>
  </tr>
  <tr>
    <th>나이</th>
    <td><input type="text" id="age" name="age" /></td>
  </tr>
  <tr>
    <th>직업</th>
    <td>
      <select name="job" id="job">
        <option value="">선택</option>
        <option value="학생">학생</option>
        <option value="회사원">회사원</option>
        <option value="공무원">공무원</option>
      </select>

    </td>
  </tr>
  <tr>
    <th>성별</th>
    <td>
      <input type="radio" id="sex_boy" name="sex" /> 남
      <input type="radio" id="sex_girl" name="sex" /> 여
    </td>
  </tr>
  <tr>
    <th>취미</th>
    <td>
      <input type="button" value="모두선택" onclick="jQuery.ja.checked('#form_input input:checkbox[name=s]');" />
      <input type="checkbox" id="s1" name="s" /> 여행
      <input type="checkbox" id="s2" name="s" /> 공부
      <input type="checkbox" id="s3" name="s" /> 컴퓨터
      <input type="checkbox" id="s4" name="s" /> 연애
      <input type="checkbox" id="s5" name="s" /> 독서
      <input type="checkbox" id="s6" name="s" /> 게임
    </td>
  </tr>
  <tr>
    <th>동의</th>
    <td>
      <input type="radio" id="is1" name="is" value="1" /> 동의
      <input type="radio" id="is_ss" name="is" value="2" /> 동의안함
      <input type="radio" id="is3" name="is" value="3" /> 모르겠음
    </td>
  </tr>
</table>
</form>

</body>
</html>

저작자표시 비영리 변경금지

'개발노트 > jQuery' 카테고리의 다른 글

jQuery rolling slider : 자동 슬라드 롤링 블릿 플러그인 (14)	2014.02.21
SWFUpload + CKEditor4 or SmartEditor2 멀티 업로드 그리고 파일 에디터 연동 : 스마트에디터 , 위지윅에디터 (10)	2013.06.20
소셜네트워크 글 내보내기 : SNS (0)	2013.04.24
jQuery Syaku Facebook API : 자바스크립트용 페이스북 API 연동 (15)	2011.11.02

> Hello World !!!

jQuery Action (ajax 전송 컨트롤러, 유효성검사, 데이타 변경, 인터셉터 이벤트)

'개발노트 > jQuery' 카테고리의 다른 글

Menus

티스토리툴바