例
5380 ワード
https://api.chucknorris.io/jokes/random
上のサイトからランダムジョークを受信して表示します。
html <h1>Learn AJAX</h1>
<div id="output"></div>
<button id="btn">Get a Joke</button>
JS <script>
var joker = document.querySelector('#btn');
joker.addEventListener('click',loadJoke); //클릭시 함수 loadJoke 불러옴
function loadJoke(){
var ajax = new XMLHttpRequest();
ajax.open('GET','https://api.chucknorris.io/jokes/random',true);
ajax.send();
}
</script>
ajax.onreadystatechange = function(){
if(this.readyState==4){
if(this.status==200){
var json = JSON.parse(this.responseText);
console.log(json)
var html = '<div><img src="'+json.icon_url+'">'+json.value+'</div>';
document.querySelector('#output').innerHTML = html;
}
}
}
Reference
この問題について(例), 我々は、より多くの情報をここで見つけました
https://velog.io/@drv98/예제
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<h1>Learn AJAX</h1>
<div id="output"></div>
<button id="btn">Get a Joke</button>
<script>
var joker = document.querySelector('#btn');
joker.addEventListener('click',loadJoke); //클릭시 함수 loadJoke 불러옴
function loadJoke(){
var ajax = new XMLHttpRequest();
ajax.open('GET','https://api.chucknorris.io/jokes/random',true);
ajax.send();
}
</script>
ajax.onreadystatechange = function(){
if(this.readyState==4){
if(this.status==200){
var json = JSON.parse(this.responseText);
console.log(json)
var html = '<div><img src="'+json.icon_url+'">'+json.value+'</div>';
document.querySelector('#output').innerHTML = html;
}
}
}
Reference
この問題について(例), 我々は、より多くの情報をここで見つけました https://velog.io/@drv98/예제テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol