Ajax에서 명절 일람을 얻다
15876 단어 JavaScriptjQueryajaxtech
개요
→사용Holidays JP API | github.io
코드
holiday_list.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>祝日一覧</title>
<meta name="description" content="The Holiday List">
<meta name="author" content="SitePoint">
<!-- cssファイルがある場合は読み込み -->
<!--<link rel="stylesheet" href="css/styles.css"> -->
</head>
<body>
<!-- jQueryのCDN読み込み -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
$(function(){
$.ajax({
url: 'https://holidays-jp.github.io/api/v1/date.json',
type: 'GET',
dataType: 'json',
timeout: 5000
}).done(function(data){
/* 通信成功時 */
$('body').append('<table></table>');
$('table').attr('border', 1);
$('table').attr('style', "border-collapse: collapse");
$('table').append('<tr><th>日付</th><th>名称</th></tr>');
Object.keys(data).forEach((key) => {
// $('table').append(`<tr><td>${key}</td></tr>`);
$('table').append(`<tr><td>${key}</td><td>${data[key]}</td></tr>`);
});
$('th').css('background-color', '#CCCCFF');
$('td').attr('align', 'center');
}).fail(function(data){
/* 通信失敗時 */
$('body').append('<p></p>');
$('p').append('通信に失敗しました');
}).always(function(data){
/* 通信成功・失敗問わず */
$('body').append('<p></p>');
$('p').append('以上です');
});
});
</script>
<!-- javascriptがある場合は読み込み -->
<!-- <script src="js/scripts.js"></script> -->
</body>
</html>
참고 자료
Reference
이 문제에 관하여(Ajax에서 명절 일람을 얻다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/c_hero/articles/99b90e4205e54b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
