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>
