잡동사니에도 사랑을

[21.10.19] exam02(01_helloAjax) - Ajax를 활용하여 HTML파일 내용 읽기 본문

JAVA_EE/AJAX

[21.10.19] exam02(01_helloAjax) - Ajax를 활용하여 HTML파일 내용 읽기

luvforjunk 2021. 10. 19. 12:51
728x90
반응형

////////exam02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
	<h1 class="title">$.ajax() 함수를 사용한 HTML소스 읽기</h1>
	<div class="exec">
		<input type="button" value="txt파일 가져오기" id="mybtn" />
	</div>
	<div class="console" id="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$('#mybtn').click(function(){
	$.ajax({
		url: '../text/text02.txt',
		type: 'get',
		dataType: 'text',
		success: function(data){
			$('#result').append(data);
		},
		error: function(err){
			console.log(err);
		}
	});
});	
</script>

</body>
</html>

 

 

 

////////text02.txt

<div style="margin-bottom: 10px">
   <h1 style="color:red">Ajax를 통해서 다른 파일을 읽어옵니다.</h1>
   <h2 style="color:blue">다른 내용은 HTML태그로 구성될 수 도 있습니다.</h2>
   <img src="../img/img9.PNG" width="70" height="70" alt="jQuery" />
</div>

 

728x90
반응형

'JAVA_EE > AJAX' 카테고리의 다른 글

[21.10.20] exam02(02_xml)  (0) 2021.10.20
[21.10.19] exam01(02_xml) - Ajax를 이용해 XML불러오기  (0) 2021.10.19
[21.10.19] exam04(01_helloAjax) - JSON형식 불러오기  (0) 2021.10.19
[21.10.19] exam03(01_helloAjax)  (0) 2021.10.19
[21.10.19] exam01(01_helloAjax) - Ajax활용하여 txt파일 불러오기  (0) 2021.10.19
'JAVA_EE/AJAX' Related Articles more