-
2022년 10월 20일 수업내용개발/개발일지(국비지원) 2022. 10. 20. 17:24728x90
fetch함수 사용방법
예제를 통해 학습을했다.
<title>fetch 예제</title>
<script>2.버튼클릭을 통해 함수가 실행된다
function loadJsp() {
//원격호출함수. ECMA6에서 추가
fetch('test1.jsp')
.then((response) => response.text())//test1.jsp데이터를 응답받아서 text(): 응답메세지 문자열형태로 알려줌
.then((data) => //data = response.text()
document.querySelector("#demo").innerHTML= data) //data를 div demo안에 대입
}
</script>
</head>
<body>
<h2>fetch 함수</h2>1.요청 버튼을 클릭하게되면 loadJsp() 함수가 실행된다.
<button type="button" onclick="loadJsp()">요청</button>
<div id="demo"></div></body></html>● GET방식:클라이언트의 데이터를 URL뒤에 붙여서 보낸다.
ex)www.naver.com?id=aaaa&pass=0000
url 뒤에 ?는 url의 끝을 알리며,데이터 표현의 시작점을 알린다.
데이터는 key와 value 쌍으로 넣어야한다.
위에 예시에서 key는 id,pass value는 aaaa와 0000이다.
&는 구분자로 2개이상의 key , value 쌍 데이터를 보낼때 구분해준다.
● POST방식:URL에 붙여 보내지않고, BODY에다가 데이터를 넣어서 보낸다.
그래서 헤더피드중 BODY의 데이터를 설명하는 Content-Type라는 헤더필드가필요하고 데이터타입을 적어준다.
POST방식은 컨텐츠타입을 꼭 써야한다.
728x90'개발 > 개발일지(국비지원)' 카테고리의 다른 글
2022년 10월 30일 기초복습(html/css) (0) 2022.10.30 2022년 10월 24일 (0) 2022.10.24 2022년 10월 19일 수업내용. (0) 2022.10.19 2022년 10월 13일 용어정리 (1) 2022.10.13 MVC(Model,View,Controller) (0) 2022.10.11