1
2
3
4
5
6
7
8
<script>
        $('span.chkAll').bin('click',function(){
//             $('input[type=checkbox].chkAll').click();
            $('input[type=checkbox].chkAll').trigger('click');
        }); //위에꺼는 ..span.chkAll 엘리먼트의 click이벤트에서
            //$('input[type=checkbox].chkAll')의 click메소드를 그냥실행
            //아래꺼는 실제 클릭 이벤트를 발생시킴
    });
cs

이벤트 연결함수

1. 각 이벤트 함수에 직접 연결

2. bind함수 이용 (1보다 유연, 이벤트 타입을 동적으로 지정)

3. live함수 이용 (동적으로 생성되는 요소에 사용) -> 1.9deprecated

4. on함수 이용 (동적으로 생성되는 요소에 사용) ->1.7부터 추가됨, bind,live 모두 통합하여 on으로 사용 권장


jquery 숫자만 입력

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    $(function(){
        $('#rrn1').on('keypress',function(event){
            if(event.which && 
                    (event.which > 47 && event.which < 58 
                            || event.which == 8)){
                
            }else{
                event.preventDefault();
return false;
            }
        })
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
        $('#rrn1').on('keyup',function(){
//             alert('dd');
            if($(this).val().length == 6)
            {
                $('#rrn2').trigger('focus');
                
            }
        });
        
        $('#rrn2').on('keyup',function(){
            if($(this).val().length == 7)
            {    
                
                var ch = $(this).val().slice(0,1);
                var gender = $('#gender');
                if(ch == '1' || ch == '3')
                    gender.text('남자');
                else if(ch == '2' || ch == '4')
                    gender.text('여자');
                
                var isAdult = $('#isAdult');
                var year = $('#rrn1').val().slice(0,2);
                var age;
                if(ch == '1' || ch == '2')
                    age = 116 - year;
                else if(ch == '3' || ch =='4')
                    age = 16 - year;
//                 isAdult.text(age);
                if(age > 20)
                    isAdult.text('성인');
                else
                    isAdult.text('미성년');
            }
        });
    });
</script>
</head>
<body>
<input type="text" id="rrn1" size="6">-<input type="password" id="rrn2" size="7"><p/>
 
성별 : <span id="gender"></span><p/>
성인여부 : <span id="isAdult"></span><p/>
cs


W3Schools Online Web Tutorials

www.w3schools.com/



jQuery

https://jquery.com/


jQuery: The Write Less, Do More, JavaScript Library.
‎Download jQuery · ‎jQuery API Documentation · ‎Plugins · ‎jQuery Learning Center


Ajax : Asynchronous JavaScript and Xml

비동기 요청으로 페이지가 아닌 데이터만 응답받는 통신방식

응답받는 데이터의 유형은 Json 혹은 xml


$('select').load(url,[params],[callbackFunc])

JQuery Ajax기능 중 가장 간단한 함수로 첫번재 인수로 지정한 url에 요청을 보내고 결과를 select된 요소에 삽입함

두번째 인자인 params는 요청 파라미터이고 callbackFunc는 응답 수신 완료후 수행할 메소드 

두번째랑 세번째는 생략가능

jQuery ajax 지원 메소드

1.요소.load(url) : url에 요청을 보내고 결과를 현재 요소에 삽입

2. jQuery.get(url,callbackFunc)

3. jQuery.post(url,data,callbackFunc)

4. jQuery.getJSON(url,data,callbackFunc)


2->get방식으로 url에 요청을 보내고 응답을 받으면 callbackFunc실행

load, get, post, getJSON 인자 같음

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/Hello.do")
public class HelloServlet extends HttpServlet{
 
   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
      // TODO Auto-generated method stub
//      super.doGet(req, resp);
      System.out.println("Get요청 들어옴");
      doProc(req, resp);
   }
 
   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
      // TODO Auto-generated method stub
//      super.doPost(req, resp);
      System.out.println("Post요청 들어옴");
      doProc(req, resp);
   }
   protected void doProc(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
       req.setCharacterEncoding("UTF-8");
       resp.setCharacterEncoding("UTF-8");
      PrintWriter writer = resp.getWriter();
      writer.write(req.getParameter("name")+"님 안녕하세요");
      writer.flush();
   }
   
}
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#sendAjax').on('click',function(){
            
//             $('#result').load('Hello.do');
 
//             $.get('Hello.do',function(data)
            $.post('Hello.do',{
                name : $('#name').val()    
            }, function(data){
                alert(data);
            });
        });
    });
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="sendAjax" value="Ajax요청">
<p/>
<div id="result"></div>
</body>
</html>
cs


' IOT 기반 응용 SW과정 > Web Programing' 카테고리의 다른 글

Day83 ajax  (0) 2016.07.15
Day81  (0) 2016.07.13
Day80 jQuery  (0) 2016.07.12
Day79  (0) 2016.07.11
Day78  (0) 2016.07.08

+ Recent posts

티스토리툴바