제이쿼리 3 jQuery

#Ajax(option) : 통합함수
 - timeout() : 제한시간초과시 취소 or 에러 콜백함수 호출
 - success() : 중요, 성공시 호출함수
 - beforeSend() : 로딩화면 돌고있는거 같은거
 - complete() : 로딩화면 돌던거 끝내는거
 
# 폼에서 요청 매개변수 얻기
 - serialize()
  - 데이터를 넘기면서 키와 밸류 형식으로 바꿔서 넘겨줌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//step06, ajax()와 serialize()
$(function() {
  $('#letter-f form').submit(function() {
    $.ajax({
      url:'server3.jsp',
      type:'post',
      dataType: 'text',
      data: $(this).serialize(),
      success: successHandler
    });
    
    function successHandler(data){
      $('#dictionary').empty();
      $('#dictionary').html(data);
    }
    
    return false;
  });
});
cs


mission step07, step02를 ajax형식으로 변경

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
//mission step07, step02를 ajax로 변경
$(function() {
  $('#letter-b').click(function() {
    $.ajax({
      url: 'b.json',
      dataType: 'json',
      success: successHandler
    });
    
    function successHandler(data){
      $('#dictionary').empty();
      $.each(data, function(index, item) {
        var html = '<div class="entry">';
        html += '<h3 class="term">' + item.term + '</h3>';
        html += '<div class="part">' + item.part + '</div>';
        html += '<div class="definition">' + item.definition + '</div>';
        html += '</div>';
 
        $('#dictionary').append(html);
      });
    }
    
    return false;
  });
});
cs


mission step08, step04를 ajax로 변경

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
$(function() {
  $('#letter-d').click(function() {
    $.ajax({
      url: 'd.xml',
      dataType: 'xml',
      success: successHandler
    });
    
    function successHandler(data){
      $('#dictionary').empty();
      $(data).find('entry').each(function(index) {
        var $entry = $(this);
        
        var html = '<div class="entry">';
        html += '<h3 class="term">' + $entry.attr('term'+ '</h3>';
        html += '<div class="part">' + $entry.attr('part'+ '</div>';
        html += '<div class="definition">' + $entry.eq(0).text() + '</div>';
//        html += '<div class="definition">' + $entry.find('definition').text() + '</div>';
        html += '</div>';
 
        $('#dictionary').append(html);
      });
    }
    
    return false;
  });
});
cs












































G
M
T
음성 기능은 200자로 제한됨

덧글

댓글 입력 영역