'IT/JAVASCRIPT' 카테고리의 글 목록

'IT/JAVASCRIPT'에 해당되는 글 2건

2013.05.06 jQuery 중복 처리 방지
2013.05.02 jQuery AJAX 예

jQuery 중복 처리 방지

IT/JAVASCRIPT 2013. 5. 6. 11:37

$(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의 간단한 예제

<!-- 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>