본문으로 건너뛰기
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

jQuery ajaxForm plugin을 사용해 보자

formajax로 처리해야 하는 경우가 있다. ajaxForm 플러그인을 사용하면 복잡한 js 코딩 없이 html의 폼 정보를 바탕으로 이것을 간단하게 처리해 준다. 나온지 오래된 플러그인이지만 여전히 사랑받는 플러그인이다.

<form action="destination.php" enctype="multipart/form-data" method="post" name="myForm" id="myForm" >
    <label for="myInput">입력하세요 : </label><input type="text" name="myInput" id="myInput">
    <label for="myFile">파일선택 : </label><input type="file" name="myFile" id="myFile">
    <input type="submit" value="확인">
</form>

위의 예시에서는 enctypemultipart/form-data로 했는데, 예시에 파일전송을 넣으려고 쓴 것이다. ajaxForm 플러그인과는 무관하다.

위 폼이 있는 문서에서 javascript 코드로 head 부분에 아래처럼 써 주는 것만으로 ajax 처리가 완벽하게 된다.

$(function(){
  $('#myForm').ajaxForm();
});

이렇게 쓰면 action값과 methodform에 지정된 대로 사용하게 된다. submit 버튼 누르면 ajax 처리가 된다.

더 구체적인 API는 당연이 ajaxForm plugin의 API를 보면 된다.

ajax 응답을 받은 후 처리를 넣으려면?

응답 받은 후 처리를 넣는 것도 간단하다.

아래 코드를 보자.

$(function(){
  $('#myForm').ajaxForm({
    success: function(data){
      alert(data);
    }
  });
});

위와 같은 코드를 사용하면, 응답받은 메시지를 alert으로 띄우게 된다. 정말 짱이다.

응답받은 후 폼을 조작하려면

$(function(){
  $('#myForm').ajaxForm({
    success: function(responseText, statusText, xhr, $form){
      alert(responseText);
      $form.css('background','red');
    }
  });
});

위 코드를 참고하면 알겠지만, success 옵션 항목에 넣는 function에 네 번째 인자값으로 $form 이라는 놈을 설정한다. (알겠지만 인자값의 이름은 아무거나 쓰면 된다. $form 으로 안 하고 asdf로 해도 된다는 거다.) 그게 바로 원래 폼의 jQuery 객체다. 이걸 바탕으로 조작을 가하면 되겠다.

옵션 구조

옵션의 구조를 살짝 설명하자. ajaxForm 안에는 json object를 인자값으로 넣을 수 있는 것이다. jQuery 자체뿐 아니라 거의 모든 jQuery 플러그인에서 이런 식으로 옵션을 집어넣는다.

알겠지만 javascriptobject 구조는 아래처럼 쓴다.(기본적으로 이건 json 구조다.)

{
  beforeSubmit: function(){ 
    alert('서브밋 직전입니다!'); 
  }, 
  success: function(){ 
    alert('전송 성공!'); 
  } 
}

대충 뭔지 이해가 가시는지.

그래서 아래와 같은 코드로 활용할 수도 있다.

var option = {
  beforeSubmit : function() {
    alert('서브밋 직전입니다!');
  },
  success : function() {
    alert('전송 성공!');
  }
};
$('#myForm').ajaxForm(option);

대충 이해가 가셨으리라 생각한다.

javascript의 이런 구조에 대해서 나는 《프로그래밍 jQuery》의 부록을 보고 많이 배웠다. 이 책은 강추니 도서관에서 빌려 보든 사 보든 jQuery를 공부하려는 생각이 있는 사람은 꼭 한 번 보기 바란다.

여튼, 이 정도면 대충 사용하는 데는 무리가 없을 것이라고 생각하는데, 만약 좀더 알기를 바란다면 jQuery ajaxForm plugin 사이트의 option 탭을 보면 된다.

dataType 옵션

option 중 알아 두면 좋은 것은 dataType 옵션인데, 설명이 아래처럼 돼 있다. 부족한 영어실력이지만 대충 번역해 본다.

dataType

응답받을 data type. null, 'xml', 'script', 'json' 중 하나를 쓰면 된다. dataType은 서버에서 받은 응답을 어떻게 처리할 지 알려 주는 역할을 한다. 이 옵션은 jQuery.httpData 메서드에 직접 맵핑된다.(이건 뭔 말인지 모르겠다. 맵핑(maps)된다는 게 정확히 뭘 의미하는지도 모르겠고, httpData 메서드는 jQuery 기본 메서드가 아닌 듯한데 jQuery.httpData라고 써 놨으니. 역시 영어실력 부족인가… OTL;;) 다음 값을 지원한다.

'xml': 만약 dataType == 'xml' 이면 서버의 응답은 xml로 취급된다. 만약 ‘success‘ 콜백 메서드가 지정돼 있다면 responseXML 값을 전달받게 될 것이다.

'json': 만약 dataType == 'json' 이면 서버 응답이 성공한 것으로 평가된 것이고, 만약 지정돼 있다면 콜백 메서드도 실행될 것이다.(if dataType == 'json' the server response will be evaluted and passed to the ‘success‘ callback, if specified _ 이거 번역 어렵다;; 맞게 번역했는지 모르겠음.)

'script': 만약 dataType == 'script' 이면, 서버 응답은 global context(이게 뭔지 모르겠다. 해 보면 알겠지.)로 취급될 것이다.

[dataType을 설정하지 않았을 때의] 기본값: null

헉헉;; 괜히 번역을 시도한 것 같다. 어쨌든,  위에서 dataType의 변수로 들어갈 값들은 따옴표로 둘러싸인 문자열값이어야 한다는 사실을 잊지 않았으면 한다.

나머지는 정말로, API 참조해서 잘 하기 바란다. 나도 더 사용해 보게 되면 더 쓰겠다. 이상.

주의할 점

json을 뿌릴 때는 내장 함수나 라이브러리를 이용하자

dataTypejson으로 설정했다면, 조심할 게 있다. 아래 코드를 보자.

{result: 1, msg: "성공!"}

이런 식으로 쓰면 안 된다. json은 key값도 따옴표를 붙여야 하기 때문이다. 위처럼 응답을 주도록 쓰고 dataTypejson으로 쓰면 처리가 실패한 것으로 간주되 아무 일도 안 일어난다,

{"result": 1, "msg": "성공!"}

이렇게 써야 json으로 인식한다. 절대로 이것 때문에 삽질하지 말자.

만약 PHP를 사용한다면, 배열을 만든 다음 아래 코드처럼 json_encode 함수를 사용하면 된다.

$arr = array('a'=>'에이', 'b'=>'비');
echo json_encode($arr);

사용하는 언어에 json 관련 함수나 라이브러리가 없을 리 없다. 찾아서 사용하자.

응답이 아무 것도 없으면

응답이 아무것도 없으면 아무 일도 안 일어난다.(즉, successfunction을 넣어 놔도 작동하지 않는다.) 테스트할 때 응답하는 쪽 파일에 아무거라도 출력하도록 하고 테스트를 해야 한다.

2012-02-21

validate 플러그인과 동시에 사용하려면 beforeSubmit 옵션을 사용한다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (13개)

  • 사실 저도 애니메이션 효과를 위해 스크립트를 찾다 jQuery 시작하게 되엇는데 요즘은 애니메이션 효과보다는 다른 기능을 더 찾게 되더군요.
    자바스크립트가 다른 어플리케이션에 비해 배우기 어려웠던차에 JQuery 덕분에 아주 쉽게 해결이 가능하지요.
    좋은 정보 감사합니다. 배워갑니다. :)

    • 사실 저도 처음엔 애니메이션 기능 보고 눈이 휘둥그레해졌다는… ^^ 하지만 jQuery의 ‘철학'(?)을 <프로그래밍 jQuery> 책에서 보게 되고, 다른 개발자들의 글도 보게 되면서(겸손한 자바스크립트 같은) 많이 배우고, jQuery의 진가를 알게 된 것 같아요. 엘양님 블로그에서 좋은 jQuery들 많이 보고 있는데 앞으로도 잘 부탁드려요~! ㅋ

  • 유튜브 영상을 편하게 보고 싶거나, 이미지 갤러리를 만들고자 하는 분들에게 추천하고자 합니다. 유용한 효과이어서 MOVYX에도 설정을 하였습니다. 전구 모양을 클릭하시면 동영상화면 외에는 모두 어두어지는 효과가 됩니다. 아래는 nyroModal 효과의 샘플입니다. Demos Ajax Ajax Filtering Content #test Ajax Filtering Content #blabla Image Gallery Img 1 Gal..

  • 응답이 없을땐 사실 success 가 아니라 error 부분이 실행되기 때문에 error 부분이 없으면 아무 일도 안 일어나는거랍니다!

  • 항상 좋은 정보 얻어 갑니다.

    ajaxForm 너무 좋죠. 저도 이제 이거 없으면 폼 넘길때 어떻게 해야 하나 걱정이랍니다.

    httpData 는 jQuery 에서 ajax를 사용할 때 쓰이는 일종의 private(?) 메소드인데요. ajaxForm 플러그인이 jquery에서 제공하는 ajax 메소드를 사용하다 보니까 여기 (ajax에서 사용되는 dataType) 직접 매핑한다고 한 것 같네요.

    • 아항! 그런 거였군요! ^^ 여기 댓글로 많은 분들이 제가 몰랐던 부분들을 지적해 주셔서 곧 이 문서도 한 번 갱신을 해야겠습니다.

  • ajaxForm은 무조건 input type 혹은 button type으로 submit을 해줘야하나요?
    img를 click시에는 ajaxForm을 가져와서 쓸수는 없는건가요?

  • jQuery의 매력이 animate(); 보다는 DOM 탐색이라는건 어제 막배운사람 아니면 다알텐데요[..]

Leave a Reply

Your email address will not be published. Required fields are marked *