Ajax 처리시 배열로 전송할 경우도 생길 수 있다. 이런 경우 아래 코드를 참고 하자.
$.ajaxSettings.traditional = true;
위 옵션을 적용하고 배열로 전송을 하면 서버에서 아래와 같은 형태로 받아 볼 수 있다.
public @ResponseBody String testMethod(int[] testArr) {
// process
}
Array 형태로 파라미터를 받을 수 있게 된다.
| Array 요소 없애는 함수 (0) | 2013.02.05 |
|---|---|
| Javascript 페이지내에서 다수의 스크립트 실행하기 (0) | 2012.12.23 |
| jQuery 다수의 Ajax 요청 처리 관련 (2) | 2012.11.27 |
| Date 함수 관련 (0) | 2012.11.16 |
| jQuery Ajax (0) | 2012.11.09 |
jQuery를 이용하여 다수의 Ajax 요청을 처리하여 결과 값으로 처리할 비지니스가 있는 경우. 문제가 발생 할 수 있다. 기본적으로 Javascript의 Ajax요청은 비동기 요청이 default 값 이기 때문에 ajax 요청은 진행 되는 상황에서도 다음 코드는 실행이 된다. 이와 같은 현상을 피할 수 있는 방법을 소개 한다.
1. setTimeout
//...
setTimeout(function() {
// process
}, 1000);
//...
위와 같은 방법을 이용하는 경우 1번째 인자는 구현하는 함수이고, 2번째 인자는 밀리초 단위로 들어간다. 위 방법은 그다지 추천하는 방법은 아니지만, 구현은 가능하다.
2. ajax 동기요청
//...
$.ajax({
//...
async: false,
//...
});
//...
jQuery를 사용 했는데, async는 기본 값이 true이고 비동기 요청을 하게 된다. 이 값을 false로 적용하게 되면, 동기 요청을 하면서 순차적인 처리가 가능해진다.
※ 참고 사이트: http://jquery.com/
| Javascript 페이지내에서 다수의 스크립트 실행하기 (0) | 2012.12.23 |
|---|---|
| jQuery로 Ajax 처리시 Array 전송하기 (0) | 2012.12.06 |
| Date 함수 관련 (0) | 2012.11.16 |
| jQuery Ajax (0) | 2012.11.09 |
| jQuery each (0) | 2012.11.08 |
Web을 개발 하다보면, Html을 접하게 되고 <form .../> 를 접하지 않을 수 없다. 데이터를 주고 받기 위해서는 Submit 을 많이 활용 한다. 단순한 작업을 할때는 상관이 없지만, 요구 사항은 갈수록 복잡해 진다.
예를 들어 한 페이지에서 글도 작성하고 파일도 업로드하고 여러가지 기능을 수행 할 수도 있다. 때로는 오른쪽 하단이나 왼쪽 상단에 작은 채팅방이 있기도 한다. 이런 요구사항들을 해결하기 위해서 Javascript의 XMLHttpRequest Object를 이용 했다. 줄여서 XHR 이라고 한다.
jQuery는 Ajax 기능을 제공 한다. http://api.jquery.com/category/ajax/ 링크를 참고 하도록 한다.
대표적으로 이해 해야할 함수로는 $.ajax 이다. 다른 함수들은 편의를 봐서 좀더 간단하게 처리해주는 함수들이 대부분 이다.
$.ajax({
url: '',
success: function(data) {
}
});
위 코드는 가장 일반적인 형태를 뛰고 있다. 추가적인 옵션은 위에 링크를 이용하여 참고 하도록 한다. 위의 경우는 비동기로 Http 요청을 처리 한다.
비동기(Asynchronous) 는 쉽게 말해서, 동시에 여러개의 요청과 응답이 발생 하는 경우이다.
다른 방법으로는 <form .../> 자체를 iFrame에 만들고 데이터를 생성 후 Submit 한다. 그 후 CallBack 메시지를 받고 처리 하게 된다. 해당 기능은 jquery.form.js 플러그인을 추가로 등록해야 한다. 파일은 첨부 하였다.
$('form').ajaxSubmit({
url: url,
type: 'post',
dataType: 'json',
statusCode: {
400: function() {},
500: function() {}
},
success: function(data) {
}
});
jQuery Selector 를 이용 Element를 가져온 후 ajaxSubmit를 호출 ajax와 사용 방법은 매우 유사 하다. 실제로 파일 업로드나, 많은 데이터를 주고 받을 경우는 위의 방법보다, 아래의 방법도 사용해볼만한 가치는 있는 것 같다.
※ 참고 사이트: http://jquery.com/
| jQuery로 Ajax 처리시 Array 전송하기 (0) | 2012.12.06 |
|---|---|
| jQuery 다수의 Ajax 요청 처리 관련 (2) | 2012.11.27 |
| Date 함수 관련 (0) | 2012.11.16 |
| jQuery each (0) | 2012.11.08 |
| jQuery Selector (0) | 2012.11.07 |
Html 태그 사이사이에 있던 데이터를 가공해야할 경우가 생길 때, 아래와 같은 명령어를 이용했다.
<input name="test" .../> 를 보면, id는 고유 Element 하나만 return 하지만, name는 n개 일 경우, 배열로 return 된다.
기존에는 for문을 활용하여 작업해야 했다. 한가지의 Element 라면 단순하게 작업을 할수 있는 환경이 조성 되지만, 부모와 자식 관계의 복잡한 Element 일 경우, 다중 for문도 활용해야 하고, 소스의 활용도도 떨어질 수 있다.
jQuery는 each문을 제공 한다.
$.each(element, function() {
// processing
}
1번째 인자는 부모 element를 target으로 두고, 2번째 인자는 하나의 row씩 반복할 때마다 실행 되는 function을 정의 하게 된다.
해당 소스를 적용 할 경우, 부모 element 하위로 있는 element 들에 접근이 가능하다. function을 구현하여 비지니스 로직을 처리 하면 된다.
| jQuery로 Ajax 처리시 Array 전송하기 (0) | 2012.12.06 |
|---|---|
| jQuery 다수의 Ajax 요청 처리 관련 (2) | 2012.11.27 |
| Date 함수 관련 (0) | 2012.11.16 |
| jQuery Ajax (0) | 2012.11.09 |
| jQuery Selector (0) | 2012.11.07 |
jQuery의 핵심 Selector를 정리 한다. Standard Selector만 이용하여 작업을 하는 경우보다. 다양한 Selector를 활용 하는 것이 시간 단축 및 좋은 개발 습관을 가져온다.
1. Standard Selector
ex) $('#id'), $('element[name=name]')
2. CheckBox Selector
$('input[name=checkBox]:checked') 이와 같이 사용 하게 되면, 해당 name을 같는 element를 Array로 읽어 드리고, 그중 Check가 된 element를 찾아 return 한다.
3. Select Selector
$('input[name=select]').val() 이와 같이 사용 하게 되면, select element의 하위 option 들 중 선택 된 element를 찾아 return 한다.
| jQuery로 Ajax 처리시 Array 전송하기 (0) | 2012.12.06 |
|---|---|
| jQuery 다수의 Ajax 요청 처리 관련 (2) | 2012.11.27 |
| Date 함수 관련 (0) | 2012.11.16 |
| jQuery Ajax (0) | 2012.11.09 |
| jQuery each (0) | 2012.11.08 |
jquery.form.js