<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비동기통신(ajax)</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css"
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
// 목표 : 버튼을 누르면 43.ajax.txt를 비동기통신으로 불러와서 내용을 출력
$(function () {
$(".load-btn").click(function () {
//$.ajax({옵션});
$.ajax({
//url: "/.43.ajax.txt",//불러올 대상의 주소
//url: "http://localhost:8080/hello",//불러올 대상의 주소
url: "http://localhost:8080/lotto",
success: function (response) {
console.log(response);
$(".display").text(response);
}
});
});
});
</script>
</head>
<body>
<button class="load-btn">불러오기</button>
<hr>
<div class="display"></div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 비동기 통신(ajax) 닉네임 체크 (0) | 2023.11.02 |
|---|---|
| 비동기통신(ajax) 아이디 체크 (0) | 2023.11.01 |
| 회원가입(jQuery) 바형태의 최종디자인 (1) | 2023.10.30 |
| 카카오 지도 API (0) | 2023.10.27 |
| 회원가입(JQuery) 고급화 (0) | 2023.10.26 |