Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- CSS
- 코틀린
- mlb stats api
- gcp
- 판다스
- 스프링
- Spring
- 파이썬
- 자바
- kotlin
- 어플
- pandas
- java
- MLB
- HTML
- Android
- javascript
- 프로젝트
- 자바스크립트
- JQuery
- 시간
- 제이쿼리
- 배포
- 오라클
- Python
- 안드로이드
- oracle
- streamlit
- 기록
- 앱
Archives
- Today
- Total
develope_kkyu
[AJAX] fetch-function 본문
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fetch-function</title>
<style>
li{
font-size: 40px;font-weight: bold;
}
</style>
<script>
function clickPage(file){
fetch(file).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML=text
})
});
}
</script>
</head>
<body>
<ol>
<li>
<a onclick="clickPage('./txt/html')">HTML 소개</a>
</li>
<li>
<a onclick="clickPage('./txt/css')">CSS 소개</a>
</li>
<li>
<a onclick="clickPage('./txt/javascript')">JAVASCRIPT 소개</a>
</li>
<li>
<a onclick="clickPage('./txt/jquery')">JQuery 소개</a>
</li>
</ol>
<article>
</article>
</body>
</html>
css
<h1>CSS 소개</h1>
<P>
CSS is... Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quod sunt consequatur, dolorum voluptatem perspiciatis non, fuga ab tempore dignissimos enim minima? Eligendi impedit velit consectetur, nesciunt nostrum dolor doloribus?
</P>
html
<h1>HTML 소개</h1>
<P>
HTML is... Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quod sunt consequatur, dolorum voluptatem perspiciatis non, fuga ab tempore dignissimos enim minima? Eligendi impedit velit consectetur, nesciunt nostrum dolor doloribus?
</P>
javascript
<h1>HTML 소개</h1>
<P>
HTML is... Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quod sunt consequatur, dolorum voluptatem perspiciatis non, fuga ab tempore dignissimos enim minima? Eligendi impedit velit consectetur, nesciunt nostrum dolor doloribus?
</P>
jquery
<h1>Jquery 소개</h1>
<P>
Jquery is... Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quod sunt consequatur, dolorum voluptatem perspiciatis non, fuga ab tempore dignissimos enim minima? Eligendi impedit velit consectetur, nesciunt nostrum dolor doloribus?
</P>
--
728x90
'FrontEnd > AJAX' 카테고리의 다른 글
[AJAX] fetch (0) | 2022.12.22 |
---|