묻고답하기
xe의 jQuery에서는 ajax가 안 되나요?
2011.06.17 10:53
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hello World</title>
<script type="text/javascript" src="../search/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function helloWorld()
{
$.ajax({
url : "helloWorld.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}
</script>
</head>
<body>
<table width="600" border=0>
<tr><td width="50" align="center">
<input type="button" name="button" value="Click!" onClick="helloWorld();">
<td width="550" align="left" valign="top">
<div id="contentArea" style="color:#FF0000;font:bold 25px
arial;padding-top:140px;"> </div>
</td>
</td>
</tr>
</table>
</body>
</html>
간단한 ajax 예제인 helloworld.html 입니다. 액션 파일 helloworld.php 는 다음과 같습니다.
<?
print $hello_world="Hello World";
?>
그냥 실행 시키거나 레이아웃 없는 외부페이지로 실행하면 문제 없이 잘 실행됩니다.
그런데 레이아웃(xe_official)을 지정하면 단추를 눌러도 "Hello World" 가 안 나오고 먹통이 되어버립니다.
물론 레이아웃을 지정할 때 XE에 기본적으로 jQuery가 올라오므로
<script type="text/javascript" src="../search/jquery-1.4.4.min.js"></script> 한 줄은 지웠고, function helloWorld()는 (function($){..
..
})(jQuery);
로 감싸 준 다음 helloworld2.html 파일을 사용하였습니다.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hello World</title>
<script type="text/javascript">
(function($){
function helloWorld()
{
$.ajax({
url : "helloWorld.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}
})(jQuery);
</script>
</head>
<body>
<table width="600" border=0>
<tr><td width="50" align="center">
<input type="button" name="button" value="Click!" onClick="helloWorld();">
<td width="550" align="left" valign="top">
<div id="contentArea" style="color:#FF0000;font:bold 25px
arial;padding-top:140px;"> </div>
</td>
</td>
</tr>
</table>
</body>
</html>
댓글 2
-
exec_xml을 사용하시면쉽게 ajax 사용이 가능합니다.
-
장서가
2011.06.17 14:42
좀 구체적으로 알 수 있을까요? exec_xml도 검색을 해 보았는데 잘 알 수가 없네요. -
SMaker
2011.06.19 16:08
XE에서는 다양한 자바스크립트 프레임웍 사용 시 충돌을 방지하기 위해서
.noConflict() method가 설정되어 있습니다.
$.ajax 대신에 jQuery.ajax를 사용하셔야 합니다.
