반응형
Ajax, 단추 클릭 시 내용 업데이트 예제
글. 수알치 오상문
이번 예제는 단추를 클릭하면 서버에서 textdata라는 텍스트 파일을 가져와서 결과 창에 출력한다.
예제에서 textdata 파일 내용은 다음과 같으며, index.html 경로에 만들었다.
[textdata 파일 내용]
I am a boy.<br>
You are a girl.<br>
We are good friends.<br>
예제 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<input type='button' value='실행' onclick="
fetch('textdata').then(function(response){
response.text().then(function(text) {
// alert(text);
document.querySelector('#article3').innerHTML=text;
})
})
">
<input type='button' value='지움' onclick="
document.querySelector('#article3').innerHTML='';
">
</div>
<h2>결과 #3</h2>
<article id='article3'>
</article>
</body>
</html>
실행 단추를 눌렀을 때 처리 시 다음처럼 함수를 분리하는 방법도 가능하다.
<input type='button' value='실행' onclick="
function getText(response){
response.text().then(function(text) {
document.querySelector('#article3').innerHTML=text;
})
}
fetch('textdata').then(getText); // 콜백함수에 getText 지정
">반응형
'AJAX, JSON' 카테고리의 다른 글
| PJAX를 이용한 극적인 웹페이지 속도 향상 (0) | 2022.05.31 |
|---|---|
| Ajax, 웹브라우저 링크 클릭하여 서버 텍스트 파일 가져와 출력 (0) | 2022.05.31 |
| JSON 공식 사이트 (0) | 2022.05.28 |
| JSP에서 Ajax와 JSON 활용하기 강좌 (0) | 2022.05.21 |
| AJAX 기초 예제 (+ Spring) (0) | 2022.05.20 |