test1.php
---------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div#viewLoading {
text-align: center;
padding-top: 70px;
background: #FFFFF0;
filter: alpha(opacity=60);
opacity: alpha*0.6;
}
</style>
<script type='text/javascript' language='javascript' src='jquery-1.7.1.min.js'></script>
<script>
$(document).ready(function($)
{
// 페이지가 로딩될 때 'Loading 이미지'를 숨긴다.
$('#viewLoading').hide();
// ajax 실행 및 완료시 'Loading 이미지'의 동작을 컨트롤하자.
$('#viewLoading')
.ajaxStart(function()
{
// 로딩이미지의 위치 및 크기조절
$('#viewLoading').css('position', 'absolute');
$('#viewLoading').css('left', $('#loadData').offset().left);
$('#viewLoading').css('top', $('#loadData').offset().top);
$('#viewLoading').css('width', $('#loadData').css('width'));
$('#viewLoading').css('height', $('#loadData').css('height'));
//$(this).show();
$(this).fadeIn(500);
})
.ajaxStop(function()
{
//$(this).hide();
$(this).fadeOut(500);
});
});
function fLoadData()
{
$.ajax({
type: "POST",
url: "test_ajax.php",
data: "",
success: function(resultText)
{
$('#loadData').html(resultText);
},
error: function() {
alert("호출에 실패했습니다.");
}
});
}
$(document).ready(function(){
$.ajax({
type: "POST",
url: "test_ajax.php",
data: "value1=jinsoo&value2=kim",
success: function(resultText)
{
$('#loadData').html(resultText);
},
error: function() {
alert("호출에 실패했습니다.");
}
});
});
</script>
<link rel="stylesheet" type="text/css" href="loading-icon.css" />
</HEAD>
<!--
그런데 form을 전송하려면 어떻게 해야 하냐하면
function userViewSub(){
var string = $("form[name=userViewFrm]").serialize();
$.ajax({
type: "POST",
url: "userViewProc.jsp",
data: string, //&a=xxx 식으로 나옴
success: adminViewProc
}
);
}
이렇게 사용하면 string 에 userViewFrm의 파라미터가
a=xxx&b=yyyy 형식으로 나오게 된다.
-->
<BODY><center>
<div style="margin-top: 20px;">
AJAX 요청.<br>
<input style="cursor: pointer;" onclick="fLoadData()" type="button" value="AJAX 요청">
</div>
<div id="loadData" style="background: rgb(239, 239, 239); border: 1px solid rgb(204, 204, 204); width: 500px; height: 200px; margin-top: 20px;"></div>
<!-- 로딩 이미지 -->
<div id="viewLoading"><center>
<!-- <img src="ani.gif"><IMG SRC="ani.gif" WIDTH="24" HEIGHT="24" BORDER="0" ALT=""> -->
<div class="spinner"><div class="piece a"></div><div class="piece b"></div><div class="piece c"></div><div class="piece d"> </div><div class="piece e"></div><div class="piece f"></div><div class="piece g"></div><div class="piece h"></div><div class="piece i"></div><div class="piece j"></div><div class="piece k"></div><div class="piece l"></div><div class="piece m"></div><div class="piece n"></div><div class="piece o"></div><div class="piece p"></div></div>
</div>
</BODY>
</HTML>
-------------------------------------------------------------------------------------------------------
test_ajax.php
--------------------------------------
<?
$value1 = $_POST["value1"];
$value2 = $_POST["value2"];
for($i=1; $i<99999; $i++){
echo $value1." " .$value2." : ".date('Y-m-d')."<br>";
}
?>
댓글
댓글 쓰기