728x90
반응형
728x90
반응형

 

JSP 파일에서 Jquery로 CSS Control 하기

 

간단하게 div에 배경색을 부여하고 버튼을 클릭하게 되면 배경색을 빨강색 > 검정색으로 변경하는 예제

 

JSP Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <div id="test1" style="background:red; height:300px;"></div>
    <div id="test2" style="background:blue; height:300px;"></div>
    <button id="changeBtn">배경색깔 바꾸기</button>
    <script type="text/javascript">
        $(document).ready(function() {
            
            $('#changeBtn').click(function(){
                $('#test1').css('background-color', 'black');
                console.log("맨위 배경색깔이 검정색으로 변경되었습니다.");
            });
 
        });
    </script>
</body>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

 

Web Page 

버튼 누르기전 div 배경색깔을 빨강색 파랑색으로 설정함

버튼을 누른 후 div 배경색깔을 빨강색을 검정색으로 변경함

 

 

728x90
반응형
저작자표시

'Web > jQuery' 카테고리의 다른 글

[jQuery] keyup Event Example  (0) 2019.08.25
[jQuery] AJAX 동기 처리 Example  (0) 2019.07.21
[jQuery] Click Event Example  (0) 2019.07.14
[jQuery] AJAX 한글깨짐 해결 Example  (0) 2019.06.23
[jQuery] AJAX 배열전송(Array) Example  (0) 2019.06.22
Modify | Delete
728x90
반응형

 

jQuery에서 키보드 Event 알아보기

Keyboard Event중 대표적으로 keyup, keydown, keypress가 있음



keyup Event - 키보드에서 무언가 입력을 하다가 손을 떼었을 때 이벤트가 실행됨

 

jQuery keyup Event Example

 

Jsp Page

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <input type="text" id="testInput" name="testInput" placeholder="keyup 테스트">
    <script type="text/javascript">
        $(document).ready(function() {
            
            $('#testInput').keyup(function(e) {
                console.log("키보드에서 손을 뗌");
                console.log("마지막 누른 키보드 ASC 값 : " + e.keyCode);
            });
        });
    </script>
</body>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

 

Web Page 

 

 

728x90
반응형
저작자표시

'Web > jQuery' 카테고리의 다른 글

[jQuery] CSS Control Example  (2) 2019.08.25
[jQuery] AJAX 동기 처리 Example  (0) 2019.07.21
[jQuery] Click Event Example  (0) 2019.07.14
[jQuery] AJAX 한글깨짐 해결 Example  (0) 2019.06.23
[jQuery] AJAX 배열전송(Array) Example  (0) 2019.06.22
Modify | Delete
728x90
반응형

 

Ajax 동기방식으로 처리하기

 

async : false 추가하기

1
2
3
4
5
6
7
8
$.ajax({
    type : "POST",
    url : url,
    async : false,
    success : function(data) {
        console.log(data);
    }
});

 

해당 Ajax가 끝난 후에 다른 부분을 실행한다.

Default async : true

728x90
반응형
저작자표시

'Web > jQuery' 카테고리의 다른 글

[jQuery] CSS Control Example  (2) 2019.08.25
[jQuery] keyup Event Example  (0) 2019.08.25
[jQuery] Click Event Example  (0) 2019.07.14
[jQuery] AJAX 한글깨짐 해결 Example  (0) 2019.06.23
[jQuery] AJAX 배열전송(Array) Example  (0) 2019.06.22
Modify | Delete
728x90
반응형

 

jQuery 클릭 이벤트 예제

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 방법 1 */
$('#ID').on("click", function(){
    
});
 
/* 방법 2 */
$('#ID').bind("click", function(){
 
});
 
/* 방법 3 */
$('#ID').click(function(){
 
);
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
728x90
반응형
저작자표시

'Web > jQuery' 카테고리의 다른 글

[jQuery] keyup Event Example  (0) 2019.08.25
[jQuery] AJAX 동기 처리 Example  (0) 2019.07.21
[jQuery] AJAX 한글깨짐 해결 Example  (0) 2019.06.23
[jQuery] AJAX 배열전송(Array) Example  (0) 2019.06.22
[jQuery] AJAX Example  (0) 2019.06.22
Modify | Delete
728x90
반응형

 

JSP에서 보낼 때

1
2
3
4
5
6
7
var text = "한글메시지깨짐";
 
방법 1
var encTextA = URLEncoder.encode(text, "UTF-8");
 
방법 2
var encTextB = escape(encodeURIComponent(text));

 

 

JSP에서 받을 때

1
var decText = URLDecoder.decode(encTextA, "UTF-8");

 

Spring Framework Controller에서 받을 때

1
2
3
4
5
6
7
8
9
@RequestMapping(value = "/ajax_test.dh")
@ResponseBody
public String ajaxTest(HttpServletRequest request) {
    
    //Ajax로 넘어온 데이터 
    String decText= URLDecoder.decode(request.getParameter("encTextA"),"UTF-8");
    
    return decText;
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
728x90
반응형
저작자표시

'Web > jQuery' 카테고리의 다른 글

[jQuery] AJAX 동기 처리 Example  (0) 2019.07.21
[jQuery] Click Event Example  (0) 2019.07.14
[jQuery] AJAX 배열전송(Array) Example  (0) 2019.06.22
[jQuery] AJAX Example  (0) 2019.06.22
[jQuery] Checkbox checked Example  (0) 2019.06.20
Modify | Delete
728x90
반응형

 

1. AJAX 배열(array) 전송시 주의사항

  • traditional : true 설정하기
  • Java Controller - getParameterValues로 받기

 

2. AJAX 사용법 간단 예제 코드

JSP 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var url = "ajax_test.dh";    // Controller로 보내고자 하는 URL (.dh부분은 자신이 설정한 값으로 변경해야됨)
var sendMsg = ['a','b','c'];
console.log("JSP에서 보낸 MSG : " + sendMsg);
 
$.ajax({
    url : url,                    // 전송 URL
    type : 'POST',                // GET or POST 방식
    traditional : true,
    data : {
        sendMsg : sendMsg        // 보내고자 하는 data 변수 설정
    },
    
    //Ajax 성공시 호출 
    success : function(data){
        console.log("컨트롤러에서 받은 MSG : " + data);
    },
 
    //Ajax 실패시 호출
    error : function(jqXHR, textStatus, errorThrown){
        console.log("jqXHR : " +jqXHR +"textStatus : " + textStatus + "errorThrown : " + errorThrown);
    }
});
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

 

크롬 Console창에서 확인하기

 

 

Controller 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@RequestMapping(value = "/ajax_test.dh")
@ResponseBody
public String ajaxTest(HttpServletRequest request) {
        
    String[] ajaxMsg = request.getParameterValues("sendMsg");
    int size = ajaxMsg.length;
    
    for(int i=0; i<size; i++) {
        System.out.println("JSP에서 받은 MSG : "+ajaxMsg[i]);
    }
        
    String resultMsg = "AJAX Success";
    System.out.println("Controller에서 보낸 MSG : "+ resultMsg);
        
    return resultMsg;
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

 

Java Console 에서 확인하기

728x90
반응형

'Web > jQuery' 카테고리의 다른 글

[jQuery] AJAX 동기 처리 Example  (0) 2019.07.21
[jQuery] Click Event Example  (0) 2019.07.14
[jQuery] AJAX 한글깨짐 해결 Example  (0) 2019.06.23
[jQuery] AJAX Example  (0) 2019.06.22
[jQuery] Checkbox checked Example  (0) 2019.06.20
Modify | Delete
728x90
반응형

 

1. AJAX 란 ?

AJAX는 Asynchronous JavaScript and XML의 약자로서 비동기적 정보 교환 기법이다.

 

2. AJAX 스프링 연동시 주의사항

  • Controller 단에서 ResponseBody 빼먹지 말기

 

3. AJAX 사용법 간단 예제 코드

JSP 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var url = "ajax_test.dh"; // Controller로 보내고자 하는 URL (.dh부분은 자신이 설정한 값으로 변경해야됨)
var sendMsg = "AJAX Data Send Test";        
console.log("JSP에서 보낸 MSG : " + sendMsg);
 
$.ajax({
    url : url,                            // 전송 URL
    type : 'POST',                    // GET or POST 방식
    data : {
        sendMsg : sendMsg        // 보내고자 하는 data 변수 설정
    }, 
 
    //Ajax 성공시 호출
    success : function(data){
        console.log("컨트롤러에서 받은 MSG : " + data);
    },
    
    //Ajax 실패시 호출
    error : function(jqXHR, textStatus, errorThrown){
        console.log("jqXHR : " +jqXHR +"textStatus : " + textStatus + "errorThrown : " + errorThrown);        
    }
});
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

 

크롬 Console창에서 확인하기

 

Controller 부분

1
2
3
4
5
6
7
8
9
10
11
12
@RequestMapping(value = "/ajax_test.dh")
@ResponseBody
public String ajaxTest(HttpServletRequest request) {
        
    String ajaxMsg = request.getParameter("sendMsg");
    System.out.println("JSP에서 받은 MSG : "+ajaxMsg);
        
    String resultMsg = "AJAX Success";
    System.out.println("Controller에서 보낸 MSG : "+ resultMsg);
        
    return resultMsg;
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

 

Java Console 에서 확인하기

728x90
반응형

'Web > jQuery' 카테고리의 다른 글

[jQuery] AJAX 동기 처리 Example  (0) 2019.07.21
[jQuery] Click Event Example  (0) 2019.07.14
[jQuery] AJAX 한글깨짐 해결 Example  (0) 2019.06.23
[jQuery] AJAX 배열전송(Array) Example  (0) 2019.06.22
[jQuery] Checkbox checked Example  (0) 2019.06.20
Modify | Delete
728x90
반응형

 

jQuery Checkbox Control 하기

 

1. Checkbox Checked 여부 확인하기 (return boolean)

 
1
2
3
4
5
6
7
8
9
10
11
12
 
ID 체크여부 확인하기 
선택==true 비선택==false
 
방법 1 : $('input:checkbox[id=checkbox_id]').is(":checked");
방법 2 : $('#checkbox_id').is(":checked");
 
 
NAME 체크여부 확인하기 
선택==true 비선택==false
 
$('input:checkbox[id=checkbox_name]').is(":checked");

 

2. Checkbox 전체선택 / 전체해제 (void)

1
2
3
4
5
6
7
8
9
 
모든 체크박스 선택하기
 
$('input:checkbox').prop("checked", true);
 
 
모든 체크박스 해제하기
 
$('input:checkbox').prop("checked", false);

 

3. Checkbox ID / NAME 으로 제어하기 (void)

1
2
3
4
5
6
7
8
9
10
11
 
ID 체크박스 제어하기 (단일)
$('#checkbox_id').prop("checked", true);
 
 
ID 체크박스 제어하기 (다중)
$('input:checkbox[id=checkbox_id]').prop("checked", true);
 
 
NAME 체크박스 제어하기 (다중)
$('input:checkbox[id=checkbox_name]').prop("checked", true);

 

4. Checkbox 전체갯수 / 선택갯수 (void)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
체크박스 전체 갯수 구하기
$("input:checkbox").length;
 
체크박스 현재 선택(체크)된 갯수 구하기
$("input:checked").length;
 
 
ID가 checkbox_id로 되어있는 체크박스 갯수 구하기
$('input:checkbox[id = checkbox_id]').length;
 
ID가 checkbox_id로 되어있는 현재 선택(체크)된 갯수 구하기
방법 1 : $('#checkbox_id:checked').length
방법 2 : $('input:checkbox[id="checkbox_id"]:checked').length;
 
 
NAME이 checkbox_name로 되어있는 체크박스 갯수 구하기
$('input:checkbox[name = checkbox_name]').length;
 
NAME이 checkbox_name로 되어있는 현재 선택(체크)된 갯수 구하기
$('input:checkbox[name="checkbox_name"]:checked').length

 

728x90
반응형

'Web > jQuery' 카테고리의 다른 글

[jQuery] AJAX 동기 처리 Example  (0) 2019.07.21
[jQuery] Click Event Example  (0) 2019.07.14
[jQuery] AJAX 한글깨짐 해결 Example  (0) 2019.06.23
[jQuery] AJAX 배열전송(Array) Example  (0) 2019.06.22
[jQuery] AJAX Example  (0) 2019.06.22
Modify | Delete

+ Recent posts

티스토리툴바