'jquery'에 해당되는 글 2건

  1. 2013.05.06 jQuery 중복 처리 방지
  2. 2013.05.02 jQuery AJAX 예

jQuery 중복 처리 방지

IT/JAVASCRIPT 2013. 5. 6. 11:37
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
    $('#foo').bind('click', function() {
        doSomething();
    });
});
 
var doSomething = function(){
    $('#foo').unbind('click');
 
    $.ajax({
        type: "POST",
        url: "some.aspx"
    }).done(function() {
        $('#foo').bind('click', function() {
            doSomething();
        });
    });
}

위처럼 jQuery.ready()에 클릭이벤트를 바인드시켜두고, 한번 클릭시 unbind() 후 ajax 요청이 끝나면(done event) 다시 bind 시키는 방법이다.
jQuery.ajax 옵션에 async: false로 주는 방법도 있으나 이는 동기식 호출이라 서버에서 처리가 오래 걸릴 경우 좋지 않다.

[출처] 네이버 블로그 http://blog.naver.com/ponin/70155062648
저작자표시 (새창열림)
Posted by lI헐헐Il
,

jQuery AJAX 예

IT/JAVASCRIPT 2013. 5. 2. 11:36
jquery 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
    <script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
    <script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>
  
    <script type="text/javascript">
  
    var JQFUNCS =
    {
        runFunc:
        {
            /* ------------------------------ ajax Demo ------------------------------ */
            "ajax":
            {
                run: function(id)
                {
                    $('#'+id+' .content1').bind('click', function(e)
                    {
                        e.preventDefault();
                        getContent('/function-demos/functions/ajax/data/content1.html');
                    });
  
                    $('#'+id+' .content2').bind('click', function(e)
                    {
                        e.preventDefault();
                        getContent('/function-demos/functions/ajax/data/content2.html');
                    });
  
                    $('#'+id+' .content3').bind('click', function(e)
                    {
                        e.preventDefault();
                        getContent('/function-demos/functions/ajax/data/content3.html');
                    });
  
                    function getContent(filename)
                    {
                        $.ajax({
                            url: filename,
                            type: 'GET',
                            dataType: 'html',
                            beforeSend: function() {
                                $('#'+id+' .contentarea').html('<img src="/function-demos/functions/ajax/images/loading.gif" />');
                            },
                            success: function(data, textStatus, xhr) {
  
                                if (filename == '/function-demos/functions/ajax/data/content3.html')
                                {
                                    setTimeout( function() {
                                        $('#'+id+' .contentarea').html(data);
                                    }, 2000);
                                }
                                else
                                {
                                    $('#'+id+' .contentarea').html(data);
                                }
                            },
                            error: function(xhr, textStatus, errorThrown) {
                                $('#'+id+' .contentarea').html(textStatus);
                            }
                        });
                    }
  
                },
  
                reset: function(id)
                {
                    $('#'+id+' .contentarea').html('Content will appear here.');
                    $('#'+id).hide();
                }
            }
        }
    }
  
    </script>
  
</head>
<body>
저작자표시 (새창열림)
Posted by lI헐헐Il
,

티스토리툴바