728x90
반응형
728x90
반응형

 

Uncaught ReferenceError: $ is not defined 에러 이유 :  jQuery js가 로딩이 안됨 > import 실패

 

 

에러 사진

 

<Body>태그와 </Body>태그 사이에 코드를 적용하면 문제가 해결 된다.

1
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

 

 

 

 

728x90
반응형
저작자표시

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

[Spring] tomcat 크로스도메인 설정 (CORS)  (0) 2021.02.17
[Spring] Oracle SID, 서비스 이름 접속방법  (0) 2021.01.10
[Spring] Mybatis 자동생성키 Selectkey Example  (0) 2020.01.05
[Spring] Model, ModelMap, ModelAndView 차이점  (5) 2019.07.27
[Spring] Session 사용하기  (0) 2019.07.21
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

티스토리툴바